利用前端生成二維碼常見問題及解決方案

最近做一個活動，需要前端生成截圖，用到了html2canvas，但是其中有個致命的問題是，活動生成的圖片中要求需要一個動態的二維碼

最初的活動是固定的二維碼，所以生成沒有問題，動態的二維碼涉及到跨域等問題，無法在生成的圖片中呈現

於是想到了利用前端canvas方式方式構建一個二維碼畫布，html2canvas也是畫布的方式理論上可以完美契合

在網上搜索一番之后發現還真有這樣的工具，選擇了比較常見的方式，jquery.qrcode

插件

前提引入了jquery，在引入
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

一個純瀏覽器 生成 QRcode 的 jQuery 插件，使用非常簡單，生成的 QRcode 無需下載圖片，並且不依賴第三方服務，插件壓縮之后大小小於 4K。

參數

text     : "xxxxx"  //設置二維碼內容    
render   : "canvas",//設置渲染方式 （有兩種方式 table和canvas，默認是canvas）   
width       : 256,     //設置寬度    
height      : 256,     //設置高度    
typeNumber  : -1,      //計算模式    
correctLevel    : 0,//糾錯等級    
background      : "#ffffff",//背景顏色    
foreground      : "#000000" //前景顏色   

使用

1.創建一個用於包含 QRcode 圖片的 DOM 元素，比如 div：<div id="qrcode"></div> 

2.通過下面代碼生成 QRcode：

最簡單方式：jQuery('#qrcode').qrcode("xxxxxxxxxx");    

自定義方式：jQuery('#qrcode').qrcode({render:canvas,width: 64,height: 64,correctLevel:0,text: "xxxxxxxxxxxx"}); 

常見問題

1.在chorme瀏覽器中二維碼生成成功后無法掃描解決方法：

//改成使用table的渲染方式，親測支持各種各版本的瀏覽器
jQuery('#qrcode').qrcode({width: 200,height: 200,correctLevel:0,render: "table",text: "xxxxxxxxxxxx"}); 

 

 2.在微信或手機瀏覽器中生成的二維碼無法掃描解決方法；

//改成使用默認的渲染方式，支持微信和QQ內置瀏覽器及其它手機瀏覽器  
jQuery('#qrcode').qrcode({width: 200,height: 200,correctLevel:0,text: "xxxxxxxxxxxx"}); 

 

作者：舊舊的 <[e-mail]> 解決問題的方式，就是解決它一次