html2canvas日常使用与大坑总结

html2canvas

是一个前端截图工具，可以将HTML元素保存为图片的一个工具库。

官方网址：http://html2canvas.hertzen.com/

html2canvas支持的CSS属性值列表：这个需要格外看一下，很多截图导致的空白等问题，很可能跟不支持的CSS属性有关！

http://html2canvas.hertzen.com/features

比如，尽量不要使用img的object-fit:cover属性，某些浏览器截图之后该属性无法被正确渲染；

也不要使用background做背景，会导致截图后背景比较虚，推荐使用Img标签配合定位做背景；

之前我还总结过一篇《Vue+html2canvas截图空白的问题》可以辅助看一下，里面主要解决html2canvas截取超出浏览器范围的部分（有滚动条的部分）显示空白的问题。

截图有空白区域的问题

最近做一个截图系统，发现有这么个奇怪现象：当截取二维码时候，出现空白！如下图：

最终逐项排查，排除了qrcode.js插件的问题，最终锁定在样式上！

二维码部分的HTML：

<div class="canvas-bottom">
        <div class="canvas-qr"  id="canvas-qr" ref="qrcode">
              <img src=" base64格式的图片">
         </div>
</div>

CSS：

.jingying-1 .canvas-bottom{
  position: absolute;
  width: 100%;
  height: 86px;
  bottom: 54px;
}
.jingying-1 .canvas-qr{
  display: inline-block;
}

最后发现，问题就出现在.canvas-qr的display: inline-block;上！因为这条属性，导致其内部的img不能正确渲染了，最终使用定位，解决此问题！

.jingying-1 .canvas-qr{
  position: absolute;
  right: 30px;
  /* display: inline-block会导致二维码截图时渲染失败，不显示二维码！ */
  /* display: inline-block; */
}

截图功能的基本使用

<div class="canvas" id="canvas">...</div>
// 截图
screenShots() {
    const boxEl = document.getElementById('canvas');
    let width = boxEl.offsetWidth;
    let height = boxEl.offsetHeight;
    // 注意这里必须使用2倍，因为要绘制2倍图，然后缩放到1倍的时候才会清晰
    let scale = 2;
    let canvas = document.createElement("canvas"); 
    // 所以这里使用二倍图，将创建擦canvas放大为目标的2被尺寸
    canvas.width = width * scale; 
    canvas.height = height * scale;
    canvas.getContext("2d").scale(scale, scale);
    let opts = {
        useCORS: true,
        scale: scale, 
        // 如果使用1.4版本的html2canvas就不能添加下面这个配置 会导致截图扩大！
        canvas: canvas, 
        width: width,
        height: height,
    };
    let promise = new Promise((resolve, reject) => {
            html2canvas(boxEl, opts).then((htmlCanvas) => {
                let context = htmlCanvas.getContext('2d');
                context.mozImageSmoothingEnabled = false;
                context.webkitImageSmoothingEnabled = false;
                context.msImageSmoothingEnabled = false;
                context.imageSmoothingEnabled = false;
                // 使用canvas2image方法必须引入canvas2image.js插件 将base64地址直接转化为img标签
                // let img = Canvas2Image.convertToImage(htmlCanvas, htmlCanvas.width, htmlCanvas.height);
                // let img = Canvas2Image.convertToPNG(htmlCanvas, htmlCanvas.width, htmlCanvas.height);
                // 这一步同样是获取生成img标签的src，得到的也是base64
                // let img_data = img.getAttribute('src');
                // 获取图片的base64
                let imgBase64 = htmlCanvas.toDataURL();
                if(imgBase64) {
                    resolve(imgBase64);
                } else {
                    reject(false);
                }
                resolve(imgBase64);
            }).catch((err) => {
                console.log('截图错误', err);
                reject(false);
            });
        });
        return promise;
    }
},

以vue为例，应用的时候：

async composeFormData() {
       // 获取生成的base64
       this.screenShotsImg = await this.screenShots();
}

这里要注意一下，我开发的时候，使用的是html2canvas的1.0版本，所以在opts那里，传入了canvas: canvas,但是如果使用的是1.4版本，那么就无需这条配置，否则会导致截图结果局部扩大!，得到不是目的结果。这点一定要注意。

重点：使用该插件时候，一定要注意版本，使用固定的版本，不要随意更新！

关于配合html2canvas插件的canvas2image，主要作用将canvas获取到base64，然后生成img标签。对于截图并不是必须。详细引用地址见“其他附件”

更多引用可以参见：http://lib.wubin.work/在搜索栏中搜：html2canvas即可发现

相关资料