生成圖片

上一篇文章中介紹了dom-to-img和html2canvas兩個(gè)插件，今天再介紹下其中隱藏的坑。

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.`

簡(jiǎn)單翻譯過(guò)來(lái)就是，不支持IE和Safari瀏覽器，同時(shí)需要注意，在ios設(shè)備上微信使用的內(nèi)置瀏覽器其實(shí)就是Safari。

html2canvas

• 不支持css3樣式

  • 背景圖替換成img標(biāo)簽
  • word-break: break-all不支持

• img標(biāo)簽需要加載完畢之后，再開(kāi)始轉(zhuǎn)圖片
  實(shí)際開(kāi)發(fā)中，可能先從接口獲取頭像，需要等加載完畢，再開(kāi)始轉(zhuǎn)圖片，否則頭像不顯示。

• dom太大，太長(zhǎng)
  ios對(duì)內(nèi)存管理很嚴(yán)格，如果dom太大，在ios設(shè)備會(huì)拋出安全異常錯(cuò)誤。

  解決方案：將dom切割，分塊轉(zhuǎn)成canvas，最后再合并到同一個(gè)canvas上。

圖片格式

關(guān)于圖片格式，最好使用png、jpg、jpeg。

因?yàn)閟vg、base64等在微信端表現(xiàn)不太良好，會(huì)導(dǎo)致以下幾個(gè)功能失效：

 長(zhǎng)按保存圖片失敗
 長(zhǎng)按識(shí)別二維碼失敗
 發(fā)送給朋友失敗

但是前端生成的圖片一般都是base64格式的字符形式。

解決方案：將base64上傳給后臺(tái)，獲取返回的url。

圖片模糊

先說(shuō)說(shuō)為什么會(huì)模糊。

將dom轉(zhuǎn)換成canvas，實(shí)質(zhì)是根據(jù)樣式將html用canvas畫(huà)出來(lái)，此時(shí)是一個(gè)像素點(diǎn)渲染一個(gè)像素，這在普通屏幕上是清晰的。
但是二倍屏、視網(wǎng)膜屏等是兩個(gè)像素點(diǎn)渲染一個(gè)像素，相當(dāng)于canvas被放大了，就會(huì)變得模糊。

解決方案：
根據(jù)設(shè)備像素比，動(dòng)態(tài)的轉(zhuǎn)換canvas。

生成二維碼

vue-qrcode

• 需要使用img標(biāo)簽
  tag: 'img'

• 尺寸
  size: 140
  遇到復(fù)雜的情況，html中包括二維碼圖片，然后將html整體轉(zhuǎn)換成圖片，如果二維碼尺寸偏小，將導(dǎo)致ios生成的圖片，在微信端長(zhǎng)按無(wú)法識(shí)別其中的二維碼。

• 邊距
  vue-qrcode這個(gè)插件生成的二維碼，超過(guò)一定尺寸就會(huì)產(chǎn)生白色的內(nèi)邊距，很丑，試了padding屬性也沒(méi)有作用。

  解決方案：除了設(shè)置size屬性外，還使用樣式控制二維碼根元素的寬高。

長(zhǎng)按識(shí)別二維碼

長(zhǎng)按識(shí)別二維碼失敗，長(zhǎng)按無(wú)識(shí)別二維碼選項(xiàng)的可能原因：

• img格式不正確
  base64、svg等格式不支持
• 二維碼尺寸偏小
• vue-touch長(zhǎng)按手勢(shì)和微信長(zhǎng)按手勢(shì)沖突

sdk config失敗

首先開(kāi)啟debug模式，查看錯(cuò)誤原因。和后臺(tái)多溝通，看看是否是因?yàn)楹灻徽_導(dǎo)致。

通常都是前端向后端請(qǐng)求，后端返回配置參數(shù)，安裝正常情況來(lái)說(shuō)，大多數(shù)返回的結(jié)果應(yīng)該是正確的，但也有可能返回的錯(cuò)誤的。

此時(shí)前端可以 暴力破解。

具體方案：
給予3次機(jī)會(huì)，當(dāng)連續(xù)3次調(diào)用接口后配置都失敗，給予用戶提示，關(guān)閉頁(yè)面，重新進(jìn)入。

授權(quán)失敗

授權(quán)失敗原因就負(fù)責(zé)了，也超出了前端的范圍，盡快找運(yùn)維、后臺(tái)解決吧。
排查步驟：

• 嘗試點(diǎn)擊該公眾號(hào)的其它菜單，觀察是否能夠進(jìn)入
• 登錄微信公眾平臺(tái)，查看相關(guān)配置，安全域名等

參考

微信公眾平臺(tái)
js-sdk demo
dom-to-image
淺析 js 實(shí)現(xiàn)網(wǎng)頁(yè)截圖的兩種方式
canvas在高倍屏下變模糊的處理辦法