html2canvas生成图片底部出现白边儿的解决方法
可能是由于像素渲染问题导致的。移动设备的屏幕像素密度(Pixel Density)较高,有时会导致在两个相邻元素之间出现细小的间隙或白线。使用html2canvas的时候,生成的图片底部出现了白边。将canvas画布高度调小1像素。
·
场景
使用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");
});
更多推荐
已为社区贡献2条内容
所有评论(0)