使用html2canvas转为图片遇到问题

产品经理不知道从某个网站看到长按保存长图,以作长图分享的功能,然后开发就悲剧了~
各种尝试,各种测试,各种bug就出现了;

1.生成的图片有白边;

2.安卓手机长按保存不了图片:

3.safir长按保存不了图片;
使用-webkit-touch-callout:default不规范的属性,iOS 2.0及更高版本的Safari浏览器可用

4.跨域图片不会生成:由于跨域问题,导致图片不会被绘制,需要多方配置
1. html2canvas的配置项中配置 allowTaint:trueuseCORS:true(二者不可共同使用)
2. img标签增加 crossOrigin='anonymous'
3. 图片服务器配置Access-Control-Allow-Origin 或使用代理
其中第三步是最重要的,不设置则前两步设置了也无效。
如果不想麻烦后端人员,就需要使用代理插件[html2canvas-proxy-nodejs]或者是 [superagent],最终页面中的图片的src:https://thirdwx.qlogo.cn/xxx 要更改为/proxy/xxx

5.生成的图片中若包含二维码,微信长按图片偶现无法识别:
不使用漏油切换,使用window.location.href直接跳转刷新页面

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。