自動生成二維碼裡面新增圖片，有兩種方法，一種是使用jquery原生的二維碼外掛，一種是別人有改動過的二維碼外掛，生成二維碼的圖片的時候有那麼一些寫的差別 第一種：使用的是原生的qrcode.js生成二維碼加上圖片 頁面 <div class="margin-top-10" id="wechartauto"> <img id="qrCodeIco"/> </div> js this.$http.post('/customer/ajax',{method:'getqrcode'},{emulateJSON:true}).then(function(response){ var wechartUlr = response.data.data; // console.log(wechartUlr) $('#wechartauto').qrcode({ render: "canvas", // 渲染方式有table方式（IE相容）和canvas方式 width: 155, //寬度 height: 155, //高度 text: wechartUlr, //內容 typeNumber: -1,//計算模式 correctLevel: 2,//二維碼糾錯級別 background: "#ffffff",//背景顏色 foreground: "#000000" //二維碼顏色 }); //設定圖片的大小 $("#qrCodeIco").css("width","50px") $("#qrCodeIco").css("height","50px") $("#qrCodeIco").attr("src","/images/newdashboard/wechat.png") var margin = ($("#wechartauto").height() - $("#qrCodeIco").height()) / 2; //控制Logo圖示的位置 $("#qrCodeIco").css("margin", margin); }) css canvas{ padding:10px;border:1px solid #f5f5f5;box-shadow:0px 1px 1px #e5e5e5; } 成果
第二種方法，就是使用有改動過的qrcode.js外掛 <!--此處需要引入三個JS檔案 一、jquery-1.8.2.js 二、excanvas.js 三、qrcode.js 順序要注意，不能亂了順序； --> <script src="js/jquery-1.8.2.js" type="text/javascript"></script> <script src="js/excanvas.js"></script> <script src="js/qrcode.js"></script> <script type="text/javascript"> $(function() { $("#bt").bind("click", function() { $("#qrcode_div").empty(); var text = $("#text").val(); $('#qrcode_div').qrcode({ render: 'canvas', text: utf16to8(text), height: 200, width: 200, typeNumber: -1, //計算模式 correctLevel: QRErrorCorrectLevel.M,//糾錯等級 background: "#ffffff", //背景顏色 foreground: "#000000", //前景顏色 //logo圖片地址 src: 'logo.png'
}); //console.info("wwww"); } ); });
function utf16to8(str) { //轉碼 var out, i, len, c; out = ""; len = str.length; for (i = 0; i < len; i++) { c = str.charCodeAt(i); if ((c >= 0x0001) && (c <= 0x007F)) { out += str.charAt(i); } else if (c > 0x07FF) { out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F)); out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F)); out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } else { out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F)); out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } } return out; }
<input type="text" id="text" value="這是輸入中文去解析二維碼" style="width:200px;"/> <input type="button" value="生成二維碼" id="bt" /> <div id="qrcode_div" style="margin-top:10px;">
此方法得出的效果是一樣的
後續補上實現的程式碼，會放在github上面