微信开发之疑难杂症

生成图片

---

上一篇文章中介绍了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 use toSvg and 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。

生成二维码

---

vue-qrcode

• 需要使用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在高倍屏下变模糊的处理办法