场景

使用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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐