生成图片
上一篇文章中介绍了dom-to-img和html2canvas两个插件，今天再介绍下其中隐藏的坑。
dom-to-image 兼容性
Internet Explorer is not (and will not be) supported, as it does not support SVG <foreignObject> tag
Safari is not supported, as it uses a stricter security model on<foreignObject> tag. Suggested workaround is to usetoSvgand render on the server.`
简单翻译过来就是，不支持IE和Safari浏览器，同时需要注意，在ios设备上微信使用的内置浏览器其实就是Safari。
html2canvas
-
不支持css3样式
- 背景图替换成img标签
- word-break: break-all不支持
img标签需要加载完毕之后，再开始转图片
实际开发中，可能先从接口获取头像，需要等加载完毕，再开始转图片，否则头像不显示。-
dom太大，太长
ios对内存管理很严格，如果dom太大，在ios设备会抛出安全异常错误。解决方案：将dom切割，分块转成canvas，最后再合并到同一个canvas上。
图片格式
关于图片格式，最好使用png、jpg、jpeg。
因为svg、base64等在微信端表现不太良好，会导致以下几个功能失效：
长按保存图片失败
长按识别二维码失败
发送给朋友失败
但是前端生成的图片一般都是base64格式的字符形式。
解决方案：将base64上传给后台，获取返回的url。
图片模糊
先说说为什么会模糊。
将dom转换成canvas，实质是根据样式将html用canvas画出来，此时是一个像素点渲染一个像素，这在普通屏幕上是清晰的。
但是二倍屏、视网膜屏等是两个像素点渲染一个像素，相当于canvas被放大了，就会变得模糊。
解决方案：
根据设备像素比，动态的转换canvas。
生成二维码
需要使用img标签
tag: 'img'尺寸
size: 140
遇到复杂的情况，html中包括二维码图片，然后将html整体转换成图片，如果二维码尺寸偏小，将导致ios生成的图片，在微信端长按无法识别其中的二维码。-
边距
vue-qrcode这个插件生成的二维码，超过一定尺寸就会产生白色的内边距，很丑，试了padding属性也没有作用。解决方案：除了设置size属性外，还使用样式控制二维码根元素的宽高。
长按识别二维码
长按识别二维码失败，长按无识别二维码选项的可能原因：
- img格式不正确
base64、svg等格式不支持 - 二维码尺寸偏小
- vue-touch长按手势和微信长按手势冲突
sdk config失败
首先开启debug模式，查看错误原因。和后台多沟通，看看是否是因为签名不正确导致。
通常都是前端向后端请求，后端返回配置参数，安装正常情况来说，大多数返回的结果应该是正确的，但也有可能返回的错误的。
此时前端可以 暴力破解。
具体方案：
给予3次机会，当连续3次调用接口后配置都失败，给予用户提示，关闭页面，重新进入。
授权失败
授权失败原因就负责了，也超出了前端的范围，尽快找运维、后台解决吧。
排查步骤：
- 尝试点击该公众号的其它菜单，观察是否能够进入
- 登录微信公众平台，查看相关配置，安全域名等
参考
微信公众平台
js-sdk demo
dom-to-image
浅析 js 实现网页截图的两种方式
canvas在高倍屏下变模糊的处理办法
