現如今圍繞微信生態相關開發已經非常常見，本期帶來如何通過
qrcode.js實現微信內置瀏覽器動態生成二維碼並能夠長按識別 以及 通過html2canvas生成圖片並長按保存
說幾個知識點
- 微信長按彈出識別選項的原理
- 微信客戶端檢測到用戶長按
img標簽 - 微信主動進行截屏並識別圖片，二維碼識別采用的是截屏而不是通過
img標簽 - 微信識別成功后執行相關操作
- 微信客戶端檢測到用戶長按
- Base64
- Base64是網絡上最常見的用於傳輸8Bit字節碼的編碼方式之一，Base64就是一種基於64個可打印字符來表示二進制數據的方法
- Blob
- HTML5中的Blob對象與MySQL中的BLOB對象有區別，HTML5中的Blob對象除了存放二進制數據外還可以設置這個數據的MINE類型，這相當於對文件的存儲，其它很多二進制對象也是從這個對象繼承的
canvas.toDataURL([type, encoderOptions])type: 指定圖片類型，默認值image/pngencoderOptions: 為image/jpeg或image/webp類型的圖片設置圖片質量，取值0-1，超出則以默認值0.92替代- 作用: 通過canvas進行轉化圖片
准備工作
- 結合微信規范明確需求
- 微信img標簽通過src屬性可實現長按彈出選項(保存至手機，圖片為二維碼的情況下會出現識別二維碼)
- 二維碼圖片若為本地圖片或服務器圖片(即不需要進行動態生成)只需要正常編寫代碼即可實現
- 微信針對內置瀏覽器內的頁面圖片有着自己的一套適應邏輯與規范，canvas的圖片和base64編碼格式的圖片在安卓與ios手機上會出現不同的問題
- 確定實現方案
- 本例采用第三方js庫實現生成二維碼
- 針對生成的base64編碼的圖片微信無法長按識別需要在前端進行格式和image對象重新轉換
- 生成的圖片彈窗展示，避免出現其他元素影響微信識別率
開發環境
- 開發平台
- MacOS
- 開發環境
- Vue + node
- 客戶端環境
- Google Chrome
- Wechat Webview
技術實現
本例的技術實現方案均在Vue項目環境下實現的
引入第三方js庫
-
提供兩種引入方式，兩種方式是不同的js庫，方便大家選擇和使用
- 本地引入
qrcode.js
// qrcode.js官方GitHub文檔: https://github.com/davidshimjs/qrcodejs <script src="static/js/qrcode.js"></script>- npm 引入
qrcodejs2
npm install qrcodejs2 import qrCode from 'qrcodejs2' - 本地引入
組件中調用
-
HTML
<div class="qrcode-panel" id="qrcode"></div> -
JS
- 簡單調用
new QRCode(document.getElementById('qrcode'), 'your content'); // new QRCode(element, option) // element 顯示二維碼的元素或該元素的 ID // option 參數配置- 標准調用
var qrcode = new QRCode(document.getElementById("qrcode"), { text: "https://www.xxx.com?did=123456&id=123&userid=456", width: 160, //圖像寬度 height: 160, // 圖像高度 render: 'canvas', // 生成格式(table 和 canvas) colorDark : "#000000", //前景色 colorLight : "#ffffff", //背景色 correctLevel : QRCode.CorrectLevel.H // 容錯級別 }); // 容錯級別，可設置為： QRCode.CorrectLevel.L（最大 7% 的錯誤能夠被糾正） QRCode.CorrectLevel.M（最大 15% 的錯誤能夠被糾正） QRCode.CorrectLevel.Q（最大 25% 的錯誤能夠被糾正） QRCode.CorrectLevel.H（最大 30% 的錯誤能夠被糾正）- 其他公共方法
QRCode.makeCode(text) // 設置二維碼內容 QRCode.clear() // 清除二維碼
重置 Image 對象
-
重置的原因是原JS生成的 image 和 canvas 對象無法在微信端長按識別
var canvas = document.getElementsByTagName('canvas')[0]; var img = this.convertCanvasToImage(canvas); document.getElementById("qrcode").append(img); convertCanvasToImage(canvas) { //新建Image對象 var image = new Image(); // canvas.toDataURL 返回的是一串Base64編碼的URL image.src = canvas.toDataURL("image/png"); image.id = 'qrcodeImg'; return image; }
后續細節處理
- 至此，一個能夠滿足長按識別的動態二維碼已經生成，不繼續處理的話會有兩張二維碼，長按對比就能看出，
qrcode.js生成的二維碼長按無法識別，而經過重置之后的對象是可以實現此功能的。 - 我的處理方式是兩個二維碼都保留，將二維碼圖片進行重新定位，將重置的二維碼圖片置於不能識別二維碼上層，不去頻繁操作DOM節點的顯示隱藏。
- 生成的二維碼通過
append的方式插入到dom節點中，在關閉操作時需要將之前生成的canvas和image去除
微信內置瀏覽器生成canvas圖片保存
- 上述教程可以實現動態生成二維碼進行保存和長按識別，但是如果需要將HTML內容生成canvas保存就存在問題了。
- 針對保存需要注意的幾個問題：
- canvas禁止跨域
- 安卓微信長按不能保存base64圖片
- 微信限制Blob類型圖片的保存
- 使用
canvas.toDataURL繪制時的類型使用image/jpeg進行保存
技術選型
- 使用第三方JS庫
html2canvas進行處理 - 識別和生成原理：
- 腳本直接在用戶瀏覽器上截取網頁或部分網頁的"屏幕截圖"
- "屏幕截圖"基於DOM，因此它可能不是真實表示的100％准確，因為它沒有制作實際的屏幕截圖，而是根據頁面上可用的信息構建屏幕截圖
- 存在的問題：
- 正是因為
html2canvas不是基於真正的屏幕截圖去識別處理，所以脫離了文檔流，或者文檔流異常的元素會無法被截取下來 html2canvas只會截取到目標元素寬高范圍內的內容- 對部分css樣式支持不好，兼容性差的屬性列表
- 正是因為
- 一些可能需要的參數
useCORS: 是否嘗試使用CORS從服務器加載圖像async: 是否異步解析和呈現元素scale: 用於渲染的比例。默認為瀏覽器設備像素比率window.devicePixelRatioallowTaint: 是否允許畫布被污染，被污染的canvas是沒法使用toDataURL()轉base64流的，部分細節請 參考這里- 更多
html2canvas參數請點擊這里
引入第三方JS庫
- 使用
html2canvas
import html2canvas from 'html2canvas'
組件中調用
- HTML
<div class="html2canvas-conetent" ref="canvasContent">
<img src="/static/images/canvas.jpg">
<span>測試Title</span>
</div>
<button @click="showCanvas()">生成canvas圖片</button>
- JS
- 使用
html2canvas推薦的promise方法
- 使用
showCanvas() {
let self = this;
html2canvas(self.$refs.canvasContent).then(function(canvas) {
self.imgUrl = canvas.toDataURL();
self.showCanvasImg = true;
});
}
// 異步解析調用和呈現元素
showCanvas() {
let self = this;
html2canvas(self.$refs.canvasContent {
async: true
}).then(canvas => {
self.imgUrl = canvas.toDataURL();
self.showCanvasImg = true;
});
}
實現效果
源碼地址
寫在最后
- 如果你覺得這篇文章對你有益，煩請點贊以及分享給更多需要的人！
快到碗里來！百度校招還有HC！甩簡歷來！
極速直接內推【字節跳動】&【百度】&【猿輔導】&【京東】
歡迎關注微信公眾號【全棧道路】，獲取更多科技相關知識及免費書籍。
更多好文
