qrcode render 二维码扫描读取
著名的 qrcode 是 zxing
https://github.com/zxing/zxing 基于 java, java 真的是轮子多啊...
zxing 的 javascript 版本是
https://github.com/LazarSoft/jsqrcode
这个版本的代码非常的 old school.
一上来就是十几行 script, 完全没有模块管理概念. 一堆全局变量
no npm, no typescript.
不过运行是 ok 的, 所以大家可以放心用.
主要的功能是 qrcode.js 里面的 process 方法, 大家可以看看源码.
只要设定好 qrcode.width, height, imageData 再调用 process 就可以了.
至于如何获取 width,height,imageData 就随便我们咯, 可以是 img upload -> canvas -> imageData, 也可以是用 WebRTC -> video -> canvas -> imageData
demo 里面有 WebRTC 的实现可以参考.
下面是例子 :
import { Component, ElementRef, ViewChild } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
@ViewChild('videoEl', { read: ElementRef })
videoEL: ElementRef;
start() {
let video = this.videoEL.nativeElement as HTMLVideoElement;
navigator.mediaDevices.getUserMedia({ video: true, audio: false }).then((stream) => {
video.src = window.URL.createObjectURL(stream);
video.play();
let canvas = document.createElement('canvas') as HTMLCanvasElement;
let context = canvas.getContext('2d');
let interval = setInterval(() => {
canvas.width = video.videoWidth
canvas.height = video.videoHeight;
context.drawImage(video, 0, 0);
let qrcode = window['qrcode'];
qrcode.debug = false;
qrcode.width = canvas.width;
qrcode.height = canvas.height;
qrcode.imagedata = context.getImageData(0, 0, canvas.width, canvas.height);
try {
let result = qrcode.process();
console.log(result);
clearInterval(interval);
video.pause();
stream.getTracks()[0].stop();
}
catch (e) {
console.log(e);
}
}, 500);
}).catch(() => {
console.log('user no allow');
});
}
upload(files: FileList) {
let file = files[0];
let img = new Image();
img.onload = (e) => {
window.URL.revokeObjectURL(img.src);
// document.body.appendChild(img);
let canvas = document.createElement('canvas') as HTMLCanvasElement;
let context = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0);
// document.body.appendChild(canvas);
let qrcode = window['qrcode'];
qrcode.debug = false;
qrcode.width = canvas.width;
qrcode.height = canvas.height;
qrcode.imagedata = context.getImageData(0, 0, canvas.width, canvas.height);
console.log(qrcode.imagedata);
try {
let result = qrcode.process();
console.log(result);
}
catch (e) {
console.log(e);
}
}
img.src = window.URL.createObjectURL(file);
}
go() {
let qrcode = window['qrcode'];
qrcode.setWebcam('video');
qrcode.callback = function (decodedDATA) {
alert(decodedDATA);
};
}
}
html
<video #videoEl id="video" width="400" height="400">
</video> <!-- <div (click)="go()" >start</div> -->
<div (click)="start()" >start</div> <input type="file" (change)="upload($event.target.files)" >
index.html
<body> <!-- 不打包压缩的话, 118kb -->
<script src="/assets/qrcode/grid.js"></script>
<script src="/assets/qrcode/version.js"></script>
<script src="/assets/qrcode/detector.js"></script>
<script src="/assets/qrcode/formatinf.js"></script>
<script src="/assets/qrcode/errorlevel.js"></script>
<script src="/assets/qrcode/bitmat.js"></script>
<script src="/assets/qrcode/datablock.js"></script>
<script src="/assets/qrcode/bmparser.js"></script>
<script src="/assets/qrcode/datamask.js"></script>
<script src="/assets/qrcode/rsdecoder.js"></script>
<script src="/assets/qrcode/gf256poly.js"></script>
<script src="/assets/qrcode/gf256.js"></script>
<script src="/assets/qrcode/decoder.js"></script>
<script src="/assets/qrcode/qrcode.js"></script>
<script src="/assets/qrcode/findpat.js"></script>
<script src="/assets/qrcode/alignpat.js"></script>
<script src="/assets/qrcode/databr.js"></script> <app-root></app-root>
</body>
qrcode render 二维码扫描读取的更多相关文章
- 【React Native 实战】二维码扫描
1.前言今天介绍React Native来实现二维码扫描的功能.首先我们要借助第三方插件react-native-barcode-scanner-universal来实现跨平台二维码扫描. 2.介绍 ...
- 使用jquery.qrcode生成二维码及常见问题解决方案
转载文章 使用jquery.qrcode生成二维码及常见问题解决方案 一.jquery.qrcode.js介 jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery ...
- Android之条形码、二维码扫描框架(非原创）
文章大纲 一.条形码.二维码扫描框架介绍二.条形码.二维码的区别和组成结构介绍三.条形码.二维码扫描框架应用场景四.BGAQRCode-Android框架实战五.项目源码下载六.参考文章 一.条形码. ...
- [Unity3D]自制UnityForAndroid二维码扫描插件
一周左右终于将二维码生成和扫描功能给实现了,终于能舒缓一口气了,从一开始的疑惑为啥不同的扫码客户端为啥扫出来的效果不同?通用的扫描器扫出来就是一个下载APK,自制的扫描器扫出来是想要的有效信息,然后分 ...
- iOS二维码扫描IOS7系统实现
扫描相关类 二维码扫描需要获取摄像头并读取照片信息,因此我们需要导入系统的AVFoundation框架,创建视频会话.我们需要用到一下几个类: AVCaptureSession 会话对象.此类作为硬件 ...
- iOS - 二维码扫描和应用跳转
序言 前面我们已经调到过怎么制作二维码,在我们能够生成二维码之后,如何对二维码进行扫描呢? 在iOS7之前,大部分应用中使用的二维码扫描是第三方的扫描框架,例如ZXing或者ZBar.使用时集成麻烦, ...
- iOS开发-二维码扫描和应用跳转
iOS开发-二维码扫描和应用跳转 序言 前面我们已经调到过怎么制作二维码,在我们能够生成二维码之后,如何对二维码进行扫描呢? 在iOS7之前,大部分应用中使用的二维码扫描是第三方的扫描框架,例如Z ...
- iOS使用AVFoundation实现二维码扫描(ios7以上)——转载
关于二维码扫描有不少优秀第三方库: ZBar SDK 里面有详细的文档,相应介绍也非常多,如:http://rdcworld-iphone.blogspot.in/2013/03/how-to-use ...
- iOS使用AVFoundation实现二维码扫描
原文:http://strivingboy.github.io/blog/2014/11/08/scan-qrcode/ 关于二维码扫描有不少优秀第三方库如: ZBar SDK 里面有详细的文档,相应 ...
随机推荐
- Python学习基础（二）——集合 深浅拷贝 函数
集合 # 集合 ''' 集合是无序不重复的 ''' # 创建列表 l = list((1, 1, 1)) l1 = [1, 1, 1] print(l) print(l1) print("* ...
- Python 操作 mysql数据库的一个小小的基础案例，小白新手，以备后用~~
model.py 中的代码 # Create your models here. # 书和作者一对多 class Author(models.Model): name = models.CharFie ...
- 在用网站ICP备案主体变更导致网站无法访问问题解决
关于ICP备案: 备案的目的:是为了防止在网上从事非法的网站经营活动,打击不良互联网信息的传播,如果网站不备案的话,很有可能被查处以后关停.非经营性网站自主备案是不收任何手续费的,所以建议大家可以自行 ...
- bzoj 3489 A simple rmq problem - 线段树
Description 因为是OJ上的题,就简单点好了.给出一个长度为n的序列,给出M个询问:在[l,r]之间找到一个在这个区间里只出现过一次的数,并且要求找的这个数尽可能大.如果找不到这样的数,则直 ...
- AppStore 添加回复
itunes connect 评论位置 1, 2, 添加用户权限:除了管理和客户支持可以回复.开发人员等只有只读权限
- switch反汇编(C语言)
在分支较多的时候,switch的效率比if高,在反汇编中我们即可看到效率高的原因 0x01分支结构不超过3个 #include <stdio.h> void main() { int x ...
- better-scroll影响vue中radio和checkbox的双向数据绑定
我的解决办法:radio <input v-model="answer" type="radio" name="answer" val ...
- 《开始使用Linux》单元测验 1
C语言编写的应用程序,通过printf打印一个换行符\n,但在终端上执行的是回车加换行\r\n,把换行符替换为回车换行是由下面哪个软件模块完成的? Linux内核中的行律模块 下面哪个命令可以获得ma ...
- IAR8.11.1安装与破解教程
IAR 8.11.1的安装与破解 1.IAR的安装 (1) (2)然后选择自己的调试方式驱动(jtag与swd...) (3)选择路径,一直下一步就好 ...
- Bytom矿池接入协议指南
矿机配置 https://gist.github.com/HAOYUatHZ/a47400bde4a138825faef415387b532c 固件升级 https://service.bitmain ...