html2canvas的使用

Posted 2023-03-15

参考技术A 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配置
~~写在结尾：
目前只是遇到这些问题，希望能帮助到大家