html2canvas的bug 【有偿】

1.html2canvas 节点多有延时,截图比较慢,如何优化?

2.html2canvas 缩放之后清晰度变高,但会导致体积太大,比如生成的海报大于5M,某些浏览器保存不了?

相关代码

DPR () {
     if (window.devicePixelRatio && window.devicePixelRatio > 1) {
       return window.devicePixelRatio
     }
     return 1
   },
   async creatShare (selector) {
     var that = this
     const domShare = document.querySelector(selector)
     const box = window.getComputedStyle(domShare)
     console.error(domShare)
     console.log(box.width)
     return await html2canvas(domShare, {
       width: parseInt(box.width, 10), // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比   将传入值转为整数才可以
       height: parseInt(box.height, 10),
       backgroundColor: null, // 背景颜色
       scale: this.DPR(),
       allowTaint: true,
       useCORS: true,
       onclone: function (clonedDoc) {
         clonedDoc.querySelector(selector).style.display = 'block'
       }
     })
       .then(function (canvas) {
         console.log('canvas', canvas)
         const shareImg = canvas.toDataURL('image/png')
         that.$refs.saveImg.src = shareImg
         that.$refs.saveImg.crossOrigin = 'Anonymous'
         that.shareHint = false
         that.saveHint = true
         that.shareImg = true
       })
       .catch(function (e) {
       })
   },

你期待的结果是什么?实际看到的错误信息又是什么?

阅读 5k
1 个回答

之前做过类似的业务,H5根据商家和商品信息生成海报的功能。 第一个问题,客户端没有好办法实现,只能去判断图片是否加载成功,加延时操作。第二个问题,客户端可以对图片做缩放,制定好可以接受的图片尺寸,生成之后压缩尺寸再下载。 不过这个操作在PC上还算是很快,在手机上速度会比较慢。
当然,还有服务端截图,使用无头chrome在服务器上渲染页面后截图,再传回客户端。这样可以解决第一个问题。 第二个问题,也可以使用 imagick 在服务端来预处理下图片再返回。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题