html2canvas生成图片底部出现白边儿的解决方法

出现场景以及其解决办法

使用html2canvas的时候，经常发现生成的图片底部出现了白边。

产生白边原因

可能是由于像素渲染问题导致的。移动设备的屏幕像素密度（Pixel Density）较高，有时会导致在两个相邻元素之间出现细小的间隙或白线。

解决方法

将canvas画布高度调小1像素

var targetDom = document.getElementById(picDom);
const setup = {
    useCORS: true, // 使用跨域
    height: targetDom.scrollHeight - 1, //canvas高, 高度减 1 是为了解决底部出现白线问题
    width: targetDom.scrollWidth, //canvas宽
    scale: 2 //按比例增加分辨率 (2=双倍).
    dpi: window.devicePixelRatio * 2 //设备像素比
 };
html2canvas(this.$refs[picRef], setup).then(canvas => {
    let blockDataURL = canvas.toDataURL("image/jpg");
});

这里的scrollHeight等也可以换成offsetHeight。

他们具体的差距可以参考这里：https://zhuanlan.zhihu.com/p/496799095

总结一下就是：

这三个属性虽然都很类似，但是每一个又有一些不一样的地方，总结起来就下面三点：

• offsetHeight = 内容高度 + padding + border
• clientheight = 内容高度 + padding
• scrollHeight = 内容实际尺寸 + padding

首先按照官网要求进行安装

https://html2canvas.hertzen.com/

npm install --save html2canvas

import html2canvas from 'html2canvas';

export function screenShots(elId) {
    const boxEl = document.getElementById(elId);
    let width = boxEl.offsetWidth;
    let height = boxEl.offsetHeight;
    // 注意这里必须使用2倍，因为要绘制2倍图，然后缩放到1倍的时候才会清晰
    let scale = 2;
    let opts = {
        useCORS: true,
        scale: scale,
        //canvas宽
        width: width,
        //canvas高, 高度减 1 是为了解决底部出现白线问题
        height: height - 1,
        //设备像素比
        dpi: window.devicePixelRatio * 2
    };
    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;
            // 获取图片的base64
            let imgBase64 = htmlCanvas.toDataURL();
            if(imgBase64) {
                resolve(imgBase64);
            } else {
                reject(false);
            }
            resolve(imgBase64);
        }).catch((err) => {
            console.log('截图错误', err);
            reject(false);
        });
    });
    return promise;
}

使用的时候，务必要等到图片都加载完了，再去截图！推荐promise.all处理所有加载请求。

相关资料