qrcode.js的識別解析二維碼圖片和產生二維碼圖片

標籤：fun   static   ack   document   img   ons   nload   width   引入   

qrcode只通過前端就能產生二維碼和解析二維碼圖片，

首先要引入檔案qrcode.js，為：http://static.runoob.com/download/qrcodejs-04f46c6.zip;

1、識別本地圖片：

    通過檔案的形式擷取到本地的圖片，產生一個圖片的臨時路徑，然後解析這個二維碼圖片；

   qrcode.decode(img)方法能將二維碼圖片解析，通過qrcode.callback=function(img){}將解析的圖片返迴文本值；

    //擷取預覽圖片路徑                var getObjectURL = function(file){                 var url = null ;                 if (window.createObjectURL!=undefined) { // basic                 url = window.createObjectURL(file) ;                 } else if (window.URL!=undefined) { // mozilla(firefox)                 url = window.URL.createObjectURL(file) ;                  } else if (window.webkitURL!=undefined) { // webkit or chrome                  url = window.webkitURL.createObjectURL(file) ;                 }                  return url ;                 }                                console.log(getObjectURL(newfile[0]));// newfile[0]是通過input file上傳的二維碼圖片檔案                qrcode.decode(getObjectURL(newfile[0]));                qrcode.callback = function(imgMsg){                    console.log("imgMsg",imgMsg);                }

　　

2、產生二維碼:

   var qrcode = new QRCode(document.getElementById("qrcode"), {
width : 100,
height : 100
});

qrcode.makeCode(‘123123‘);

產生二維碼

 

qrcode.js的識別解析二維碼圖片和產生二維碼圖片