html2canvas生成图片报错处理办法

需要注意的是
1、要生成的网页中带的网络图片地址(如放在阿里云服务器图库的图片)经常有跨域报错问题,
除了给img标签去加上 跨域属性crossorigin="anonymous"以外,
图片地址结尾需要拼接个任意字符串以防缓存原因图片没有实时修改显示('http://h0.hucdn.com/open/201819/9404b56f97e7df8a_750x1334.png?any_string_is_ok');

2、生成的canvas背景图片消失问题,
所有用的background:url()都改成标签加在DOM里面(就是写样式不要用放背景图的方式,改成img标签去给他定位到底层实现背景图的效果),

3、测试的时候注意刷新加载时清空缓存硬性加载

4、移动端包含base64图片安卓可以截图成功,但苹果ios中base64图片没截到没反应也不报错问题,
可能是版本兼容问题-可以去掉pakage.json canvas2html版本前面的'^',把版本定到1.0.0-rc.4。

5、遇到截图后图片顶部出现多出空白超出屏幕的没截上问题(设置了margin-top属性和overflow:hidden等操作),解决办法:
不要使用overflow:hidden属性,让屏幕超长可以往下滑、截图前先用js让页面回到顶部;

6、生成的图片没有高度或者超出一屏的图片被压扁
子元素使用绝对定位是脱离标准流的,父元素则没有被子元素的高度撑开,子元素应该使用浮动,父元素再清除浮动,浮动并未完全脱离标准流;
保证的img继承高度的父元素的高度是要截取的子元素的高度相加,而不是单纯设置父元素高度是窗口的100%;

参考: https://www.jianshu.com/p/22bd5b98e38a).(https://www.jianshu.com/p/22bd5b98e38a

参考:https://blog.csdn.net/weixin_34075551/article/details/93542594

posted @ 2019-09-02 19:22  那狗子真肥  阅读(4359)  评论(0)    收藏  举报
Live2D