html2canvas的bug 【有偿】

Question

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) {
       })
   },

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

Answer 1

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