场景

使用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: this.isPad ? 6 : 7.5, //按比例增加分辨率 (2=双倍).
    dpi: window.devicePixelRatio * 2 //设备像素比
 };
html2canvas(this.$refs[picRef], setup).then(canvas => {
    let blockDataURL = canvas.toDataURL("image/jpg");
});
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐