微信小程序实现长按扫描二维码
小程序内置扫描二维码
image
使用小程序提供的image组件,image组件上有一个show-menu-by-longpress的属性,设置为true
<image show-menu-by-longpress="{{true}}"></image>
当image被长按时会弹出选择菜单
wx.previewImage
wx.previewImage({
urls:['./imgs/qrcode.png']
})
当图片预览时,长按图片会弹出菜单
自定义实现扫描二维码
上面的实现方式,支持微信小程序、公众号、个人微信、微信群二维码,对于其他的二维码不能识别,因此,只能自定义实现。
实现扫描二维码需要使用以下工具
小程序原生组件:iamge、canvas组件
小程序原生API:wx.showActionSheet()、canvas.createImage()
解析二维码工具库:upng-js、jsqr
实现步骤
- 绑定事件:使用image和canvas组件,在image组件上监听longpress事件
- 显示菜单:触发事件后,使用wx.showActionSheet显示菜单
- 创建image对象:点击菜单后,获取canvas的node,获取context,然后通过wx.canvasGetImageData得到图像数据,然后通过upng解析
- 将解析结果显示在页面上
<image src="./imgs/qrcode.png" bindlongpress="handleImageLongpress" data-src="./imgs/qrcode.png"><image>
<canvas id="canvas" canvas-id="canvas" type="2d"></canvas>
const uPng = require('upng-js');
const {default:jsQR} = require('jsqr');
const qrcodeParser = require('qrcode-parser')
handleImageLongpress(e){
const src = e.currentTarget.dataset.src;
wx.showActionSheet({itemList:['识别二维码']}).then((res) => {
wx.createSelectorQuery()
.select('#canvas')
.fields({node:true})
.exec(res => {
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
const img = canvas.createImage();
img.src = '../imgs/hello world.png';
img.onload = function (){
ctx.drawImage(img,0,0,canvas.width,canvas.height);
let url = canvas.toDataURL();
let buff = wx.base64ToArrayBuffer(url.split(',')[1]);
let imgData = upng.decode(buff);
let rgba = upng.toRGBA8(imgData)[0];
let code = jsQR(new Uint8ClampedArray(rgba),canvas.width,canvas.height);
console.log(code.data)
}
});
});
}
wx.scanCode
除了上面的扫描二维码的方法外,还可以使用wx.sacnCode调用用户手机的摄像头实现扫码,这种情况需要用户授权荀彧使用摄像头,才能调用接口。这种接口的场景有限,通常适用于用户点击某个按钮然后进行扫码,支付场景比较常见,还有就是通过二维码加好友、加群等场景。
如果上面这些方法还是不能满足需要,只能让后端实现解析二维码,前端只需要传递一张图片就行
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfjbji
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01