html2canvas的使用

1.图片的偏移问题

有一个很重要的问题需要提醒一下,当你的dom元素没有用到绝对定位或者fixed定位的时候,不要给元素加上偏移量,这样有可能会导致你的图片发生偏移。我们在项目上线的时候遇到了一个很郁闷的问题,保存的图片在预发和测试环境上都没有问题,但是只要上生产环境就会发生图片偏移,后来我们通过修改,发现了是这个定位的问题。

2.对 css3 支持不好

html2canvas 暂不支持的 CSS 样式属性:

background-blend-mode、background-clip: text、box-decoration-break、repeating-linear-gradient()、font-variant-ligatures、mix-blend-mode、writing-mode、writing-mode、border-image、box-shadow、filter、zoom、transform

3.背景图片模糊

解决方案:使用img标签来实现background-image的效果

4.图片无法渲染

在img标签内加入crossorigin=‘anonymous’(crossorigin='anonymous’可以触发带跨域请求头Origin的HTTP请求)并给html2canvas设置allowTaint: true配置

~~写在结尾:

目前只是遇到这些问题,希望能帮助到大家