如今圍繞微信生態相關開發已經非常常見，本期帶來如何通過 qrcode.js 實現微信內置瀏覽器動態生成二維碼并能夠長按識別 以及 通過 html2canvas 生成圖片并長按保存

說幾個知識點

微信長按彈出識別選項的原理

• 微信客戶端檢測到用戶長按img標簽
• 微信主動進行截屏并識別圖片，二維碼識別采用的是截屏而不是通過img標簽
• 微信識別成功后執行相關操作

Base64

• Base64是網絡上最常見的用于傳輸8Bit字節碼的編碼方式之一，Base64就是一種基于64個可打印字符來表示二進制數據的方法

Blob

• HTML5中的Blob對象與MySQL中的BLOB對象有區別，HTML5中的Blob對象除了存放二進制數據外還可以設置這個數據的MINE類型，這相當于對文件的存儲，其它很多二進制對象也是從這個對象繼承的

canvas.toDataURL([type, encoderOptions])

• type : 指定圖片類型，默認值 image/png
• encoderOptions : 為 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官方GitHub文檔: https://github.com/davidshimjs/qrcodejs
<script src="static/js/qrcode.js"></script>

// 第二種方式
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.devicePixelRatio
• allowTaint : 是否允許畫布被污染，被污染的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;
	});
}

實現效果

源碼地址

• Github地址(請點擊原文鏈接查看)