vue-zxing 识别二维码内容

ZXing，一个支持在图像中解码和生成条形码(如二维码、PDF 417、EAN、UPC、Aztec、Data Matrix、Codabar)的图像处理库。本文主要以解码为主，通过扫描二维码解析内容。

ZXing 网上以java 和 Android 方案居多，官方github也是以java为主，前端实现的文档和案例并不多，由于最近公司业务涉及到扫码识别内容的需求，自己通过ZXing进行二次封装，并发布到npm官方仓库中。

仓库地址：https://www.npmjs.com/package/vue-zxing-zk

一、安装插件

npm i vue-zxing-zk

二、使用

<template><div class="box">    <scan-code :scanConfig="scanConfig" @success="getcode"></scan-code></div>
</template><script>
import scanCode from 'vue-zxing-zk'export default {components: {scanCode},data() {return {scanConfig: {color: '#F64847', // 扫描框颜色tips: '支持二维码/条形码' // 底部提示文案} }},methods: {// 扫码成功回调getcode(txt) {this.$toast('扫码结果是：' + txt)}}
}
</script>

提示：ZXing库要用https才能打开摄像头，需在vue.config.js里设置https: true即可，再运行npm run serve 即可打开https协议的地址了。

ZXing 官方示例：https://zxing-js.github.io/library/

扫码识别条码结果

体验链接(手机端)：https://zk-web-object.oss-cn-qingdao.aliyuncs.com/wxy/code/index.html

vue-zxing 识别二维码内容相关推荐

docker中使用python zxing实现二维码内容识别
python中可以使用多种方法实现二维码内容的识别,但是不同实现的表现也各不相同,根据个人体验,zxing的识别效果要强于pyzbar. 但在将项目打成docker时,遇到了问题. File ...
小程序实现扫码识别二维码内容
前言在开发程序过程中经常和二维码打交道,经常要查看二维码的内容是什么,所以决定自己开发一个可以识别二维码,生成二维码的小工具. 一.项目展示用户可以识别生活中常见的支持条码.二维码.DataMat ...
通过二维码图片识别二维码内容方法
示例代码功能见-识别二维码工具反解析二维码工具识别条码工具反解析条码工具http://sberwm.gsjlw.com/ 可以通过读取图片中的信息,来逆向识别二维码的内容, 主要使用了ZBarC ...
C++用zxing识别二维码
zxing 可以从github的官方网站上下载下来,这里提供一个VS 2010编译zxing的静态库工程,编译时注意一点是:zxing的很多不同的文件夹下含有相同名称的源文件,在编译时应该分别设置这些 ...
Opencv之python使用zxing识别二维码
方式1: 安装方式: pip install zxing import zxingreader = zxing.BarCodeReader() barcode = reader.decode(&quo ...
python二维码生成识别代码_Python3+qrcode+zxing生成和识别二维码教程
一.安装依赖库 pip install qrcode pillow image zxing pillow是python3中PIL的代替库,image是生成图版需要用到的库安装image时报错&quo ...
生成二维码、识别二维码的工具类
笔者日常: 第一次用markdown写文章,有点手生~ 声明: 此工具类由本人二次整理改造后分享给大家,原编写者未知,虽然本人重写了大部分逻辑代码,但是核心部分仍然是采用的原来的代码.若涉及侵权问题, ...
Python生成+识别二维码
二维码(QR Code),使用平面图案存储信息,根据白0黑1的算机内部逻辑,使用若干个与二进制相对应的几何形体来表示文字数值信息,通过图象输入设备或光电扫描设备自动识读以实现信息自动处理,记录好所有数 ...
ZXing 相册中识别二维码和条形码(直接引用就可以了)
*百度了很久一直没有找到关于相册获取条形码的Demo,真心是醉了,只能苦逼的去自己看闲话不说直接搞起分析: *核心 1,通过路径转换成bitmp对象 2,再bitmap对象转换成二进制图片(二值化 ...

vue-zxing 识别二维码内容

vue-zxing 识别二维码内容相关推荐

最新文章

热门文章