使用html2canvas插件生成图片时,图片底部有一条白线的问题

在使用html2canvas插件把页面生成图片时,如果背景不是白色的,会发现生成图片的底部会有一条白线。

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

解决方法

将canvas画布高度调小1像素,生成图片之前先获取生成图片元素的高度

var imgheight=document.getElementById(InvitationeIdHtml);

imgheight=img.scrollHeight 

然后调用html2canvas插件生成图片时,设置高度-1px。

// 调用html2canvas插件
html2canvas(img, {
useCORS: true,
scale: 5,
dpi: 300,
height: imgheight - 1,//生成的图片高度减1px

})

posted @ 2025-01-13 10:33  老和尚106  阅读(404)  评论(0)    收藏  举报