jquery實現微信長按識別二維碼

時間 2019-11-07

原文原文鏈接

1.引入JS庫javascript

<script src="jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
    <script src="jquery.qrcode.min.js" type="text/javascript" charset="utf-8"></script>

2.在頁面建立一個空的div;css

<div id="qrDiv"></div>

3.生成二維碼html

$("#qrDiv").qrcode({ 
            width: 120, //寬度 
            height:120, //高度 
            text: "須要生成的二維碼內容" //任意內容 
   });

注意：這個時候生成的二維碼在微信中長安沒任何反應，由於qrcode生成的是canvas標籤而不是img標籤java

4.將canvas標籤轉換爲img標籤jquery

//從 canvas 提取圖片 image
function convertCanvasToImage(canvas) {
    //新Image對象，能夠理解爲DOM
    var image = new Image();
    // canvas.toDataURL 返回的是一串Base64編碼的URL，固然,瀏覽器本身確定支持
    // 指定格式 PNG
    image.src = canvas.toDataURL("image/png");
    return image;
}

//獲取網頁中的canvas對象

var mycanvas1=document.getElementsByTagName('canvas')[0];

//將轉換後的img標籤插入到html中

var img=convertCanvasToImage(mycanvas1);

 $('#imagQrDiv').append(img);//imagQrDiv表示你要插入的容器id

注意：完成上述步驟後就能夠在微信中長按識別了，建議在微信公衆號信任的域名下進行測試canvas

完整代碼：瀏覽器

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>微信長按二維碼識別</title>
</head>
<body>
	<div id="qrDiv"></div>
</body>
</html>
<script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$("#qrDiv").qrcode({ 
		width: 120, //寬度 
		height:120, //高度 
		text: "須要生成的二維碼內容" //任意內容 
	});
	
	//從 canvas 提取圖片 image 
	function convertCanvasToImage(canvas) { 
		//新Image對象，能夠理解爲DOM 
		var image = new Image(); 
		// canvas.toDataURL 返回的是一串Base64編碼的URL，固然,瀏覽器本身確定支持 
		// 指定格式 PNG 
		image.src = canvas.toDataURL("image/png"); 
		return image; 
	} 
	
	//獲取網頁中的canvas對象 
	var mycanvas1=document.getElementsByTagName('canvas')[0]; 
	//將轉換後的img標籤插入到html中 
	var img=convertCanvasToImage(mycanvas1); 
	$('#imagQrDiv').append(img);//imagQrDiv表示你要插入的容器id
</script>