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