js 将微信二维码转为url,qrcodeJs解析二维码,qrcode.decode is not a function报错

前言

工作中遇到的需求:用户上传相册中选中的图片,判断这个图片里的二维码是不是微信二维码,如果是则上传到服务器;不是,则提示用户重新上传。

百度了下,qrcode.js是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。看了看文档,感觉好简单,从github 上下载了源码就开干了。github上下载的源码可以将 url 转成二维码,但是用 qrcode.decode 解析二维码图片时,一直提示 qrcode.decode is not a function(如下图),也不会触发 callback 回调。
在这里插入图片描述
打印出 QRCode 实例,发现在原型链上确实没有 decode方法,只有 clear()、makeCode()、makeImage() 三个方法。
js 将微信二维码转为url,qrcodeJs解析二维码,qrcode.decode is not a function报错_第1张图片
生成二维码用 qrcode.js 库,解析二维码用 reqrcode.js 库。

解析二维码

  • 通过 input 的 files 属性获取到图片的信息
  • qrcode.decode() 解析二维码图片
  • qrcode.callback = function (imgMsg){} 返回解析后的二维码地址

打印出 input 的 files 属性如下图所示:
js 将微信二维码转为url,qrcodeJs解析二维码,qrcode.decode is not a function报错_第2张图片

附上解析二维码的完整代码,demo的下载地址:https://download.csdn.net/download/Charissa2017/12676720


<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>解析二维码title>
    <script src="reqrcode.js">script>
head>
<body>
    <input type="file" id="input">
    <div id="text">div>
body>
<script>
    var inp = document.getElementById('input');
    //获取预览图片路径
    var getObjectURL = function (file) {
        let 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;
    }
    inp.onchange = function () {
        // files[0]是通过input file上传的二维码图片文件
        qrcode.decode(getObjectURL(this.files[0]));
        qrcode.callback = function (imgMsg) {
        	//imgMsg 就是解析后的路径
            document.getElementById('text').innerHTML = imgMsg;
        }
    }
script>
html>

生成二维码

可以在项目中直接使用 script 标签引入 qrcode.js 文件,或者使用 npm 安装 第三方插件包qrcode 。

  • 语法:new QRCode( id , options ),options 非必须
var qrcode = new QRCode("box", {
    text: "http://www.runoob.com",	//要生成二维码的链接
    width: 128,		//二维码的宽度
    height: 128,	//二维码的高度
    colorDark : "#00f",		//前景色
    colorLight : "#ffffff",		//背景色
    correctLevel : QRCode.CorrectLevel.H	//生成二维码的标准
}

页面效果如下:
js 将微信二维码转为url,qrcodeJs解析二维码,qrcode.decode is not a function报错_第3张图片

  • 或者使用 makeCode( url ) 方法
//box 为容器元素的id
var qrcode = new QRCode('box',{
	width: 128,
	height: 128,
	colorDark : "#00f",
	colorLight : "#ffffff",
	correctLevel : QRCode.CorrectLevel.H
})
qrcode.makeCode("http://www.runoob.com")

参考资料:https://www.runoob.com/w3cnote/javascript-qrcodejs-library.html

你可能感兴趣的:(其它)