qrcode.js的识别解析二维码图片和生成二维码图片

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');

生成二维码

 

2018-9-12:

实在不好意思,我用的插件是经过别人再次封装的,我将一个解析二维码的demo放在了码云需要的可以去下载!!

https://gitee.com/weijunw/erweima

另外在本博客的资源也可以下载:https://download.csdn.net/download/qq_37705048/10720916

当然上传的图片里要有二维码才能解析出来!!!

你可能感兴趣的:(学习)