使用html2canvas,将页面转换成图片的图片模糊等踩坑记录(Web/Taro h5)

使用html2canvas将页面转换成图片的采坑记录

 "html2canvas": "^1.4.1",
 "@tarojs/taro": "3.4.0-beta.0"

问题:

1. 生成的图片很模糊
2. 生成的图片是空白
3. 生成的图片不完整

截图前是这样

截图后这样

截图后的图片图片缺省了一部分

解决方案

问题1: 生成的图片很模糊(图片跨域)

方法一: 将canvas放大n倍再作图;

移动端的话,根据移动设备的devicePixelRatio (devicePixelRatio 返回当前显示设备的物理像素分辨率与CSS 像素分辨率之比)决定缩放比例;也可以默认放大两倍转换

方法二: 使用<img>来实现background-image的效果

只有作为background-image的背景图会模糊，而<img>图片标签是没有这个问题的。

问题2: 生成的图片是空白(图片跨域)

首先确定转换后的canvas的宽高是否正确,如果不正确,就需要给html2canvas传递宽高参数 !!!

没有宽高问题,然后再细细排查发现,在使用 转换的时候图片有跨域问题,导致转换失败,所以转换成了空白图片(大概率都是这个原因);将图片去掉就可以正常转换页面的

解决方案:

方案一:

后端需要在服务器IIS上的HTTP响应标头设置，最简单粗暴的方法就是全部设置成*，不过这样安全性也低，自己可以根据自己需求设置

access-control-allow-