前言

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

百度了下，qrcode.js是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签，再通过 HTML5 Canvas 绘制而成，不依赖任何库。看了看文档，感觉好简单，从github 上下载了源码就开干了。github上下载的源码可以将 url 转成二维码，但是用 qrcode.decode 解析二维码图片时，一直提示 qrcode.decode is not a function（如下图），也不会触发 callback 回调。

打印出 QRCode 实例，发现在原型链上确实没有 decode方法，只有 clear()、makeCode()、makeImage() 三个方法。

生成二维码用 qrcode.js 库，解析二维码用 reqrcode.js 库。

解析二维码

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

打印出 input 的 files 属性如下图所示：

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

<!DOCTYPE html>
<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) { // basicurl = window.createObjectURL(file);} else if (window.URL != undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) { // webkit or chromeurl = 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   //生成二维码的标准
}

页面效果如下：

或者使用 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

js 将微信二维码转为url，qrcodeJs解析二维码，qrcode.decode is not a function报错相关推荐

微信小程序中this.setData is not a function报错问题
微信小程序中this.setData is not a function报错问题新手在编写小程序时经常会遇到的一种错误. 新手在编写小程序时经常会遇到的一种错误. 在小程序中,通常我们用setDat ...
微信小程序异常，this.setDate is not a function报错求解
微信小程序异常,this.setDate is not a function报错求解 this.setDate({ v4:"v4444" })this.setData 写错了
node.js基于微信小程序的校园失物招领系统毕业设计源码072343
微信小程序的校园失物招领系统摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序的校 ...
mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
h5+js调取相机做取景框_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
使用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发 ...
Flink 1.12.2 源码浅析 : yarn-per-job模式解析 [二]
. 一 .前言二 .启动解析 2.1. StreamExecutionEnvironment#execute 2.2. StreamExecutionEnvironment#executeAsync ...
微信小程序中this指向作用域问题this.setData is not a function报错
在微信小程序中我们一般通过以下方式来修改data中的数据 this.setData({index1: e.detail.value}) 比如在函数里面修改数据 bindFaChange1: funct ...

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

前言

解析二维码

生成二维码

js 将微信二维码转为url，qrcodeJs解析二维码，qrcode.decode is not a function报错相关推荐

最新文章

热门文章