1.图片跨域
(1)尽可能同源
(2)无法同源时
后端headers设置access-control-allow-origin:*
配置中设置useCORS:true
(3)不是自己的服务器无法配置时,后端也没法帮忙转发的话,可尝试把图片转为base64,但图片多时会有性能问题
2.截图不全。
网上有很多相关的回答,自己遇到的原因是,需要截图的dom样式不能用fixed定位。
3.生成的图片不清晰。
网上也有很多相关回答,大概思路都是获取分辨率,canvas宽高放大。
4.使用的图片资源有虚边模糊
使用背景图片会比较模糊,尽量避免使用背景图片换成img标签
5.border-radius不生效
在div上设置border-radius: 50%没有生效,设置成具体数值
6.safari中部分图片显示不全
一般canvas画图都会等使用资源全部返回后才开始画图,所以谷歌和安卓手机网速再慢都只是生成图片时间较长但没缺失图片的问题,但在ios上由于请求的图片较多,会出现部分头像空白的情况。
暂时没找到原因,解决方法是,在生成图片前便渲染一次dom,把图片都加载好,生成图片时利用浏览器的缓存来减少空白图片的概率