著名的 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 二维码扫描读取的更多相关文章

  1. 【React Native 实战】二维码扫描

    1.前言今天介绍React Native来实现二维码扫描的功能.首先我们要借助第三方插件react-native-barcode-scanner-universal来实现跨平台二维码扫描. 2.介绍 ...

  2. 使用jquery.qrcode生成二维码及常见问题解决方案

    转载文章  使用jquery.qrcode生成二维码及常见问题解决方案 一.jquery.qrcode.js介 jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery ...

  3. Android之条形码、二维码扫描框架(非原创）

    文章大纲 一.条形码.二维码扫描框架介绍二.条形码.二维码的区别和组成结构介绍三.条形码.二维码扫描框架应用场景四.BGAQRCode-Android框架实战五.项目源码下载六.参考文章 一.条形码. ...

  4. [Unity3D]自制UnityForAndroid二维码扫描插件

    一周左右终于将二维码生成和扫描功能给实现了,终于能舒缓一口气了,从一开始的疑惑为啥不同的扫码客户端为啥扫出来的效果不同?通用的扫描器扫出来就是一个下载APK,自制的扫描器扫出来是想要的有效信息,然后分 ...

  5. iOS二维码扫描IOS7系统实现

    扫描相关类 二维码扫描需要获取摄像头并读取照片信息,因此我们需要导入系统的AVFoundation框架,创建视频会话.我们需要用到一下几个类: AVCaptureSession 会话对象.此类作为硬件 ...

  6. iOS - 二维码扫描和应用跳转

    序言 前面我们已经调到过怎么制作二维码,在我们能够生成二维码之后,如何对二维码进行扫描呢? 在iOS7之前,大部分应用中使用的二维码扫描是第三方的扫描框架,例如ZXing或者ZBar.使用时集成麻烦, ...

  7. iOS开发-二维码扫描和应用跳转

    iOS开发-二维码扫描和应用跳转   序言 前面我们已经调到过怎么制作二维码,在我们能够生成二维码之后,如何对二维码进行扫描呢? 在iOS7之前,大部分应用中使用的二维码扫描是第三方的扫描框架,例如Z ...

  8. iOS使用AVFoundation实现二维码扫描(ios7以上)——转载

    关于二维码扫描有不少优秀第三方库: ZBar SDK 里面有详细的文档,相应介绍也非常多,如:http://rdcworld-iphone.blogspot.in/2013/03/how-to-use ...

  9. iOS使用AVFoundation实现二维码扫描

    原文:http://strivingboy.github.io/blog/2014/11/08/scan-qrcode/ 关于二维码扫描有不少优秀第三方库如: ZBar SDK 里面有详细的文档,相应 ...

随机推荐

  1. Python3 解析excel文件

    Python3 解析读取excel文件 一.第三方库 import xlrd 二.代码示例 import xlrd ''' 读取Excel每个sheet的第一列和第二列的值,拼接成json串,写入文件 ...

  2. 2、pandas的value_counts()和describe()

    一.value_counts pandas 的value_counts()函数可以对Series里面的每个值进行计数并且排序. value_counts是计数,统计所有非零元素的个数,默认以降序的方式 ...

  3. 【题解】Luogu P1972 [SDOI2009]HH的项链

    原题传送门 莫队入门题 我博客里对莫队的介绍 很多人说这题卡莫队,但窝随便写了一个程序就过了qaq(虽说开了氧化) 我们在排序询问时,普通是这样qaq inline bool cmp(register ...

  4. Angular routing生成路由和路由的跳转

    Angular routing生成路由和路由的跳转 什么是路由 路由的目的是可以让根组件按照不同的需求动态加载不同的组件. 根据不同地址,加载不同组件,实现单页面应用. Angular 命令创建一个配 ...

  5. 20145308 《网络对抗》Web安全基础实践 学习总结

    20145308 <网络对抗> Web安全基础实践 学习总结 实验内容 本实践的目标理解常用网络攻击技术的基本原理.Webgoat实践下相关实验. 基础问题回答 (1)SQL注入攻击原理, ...

  6. tf.nn.max_pool

    tf.nn.max_pool(value, ksize, strides, padding, name=None)   参数是四个,和卷积很类似: Args Annotation 第一个参数value ...

  7. Delphi XE5 for Android （八）

    delphi xe5 编译的程序在启动时会有短暂的黑屏出现,这个现象产生是因为启动首个activity时会加载一些初始化数据,整个时间大约在2~3秒,如何处理? 网上有些资料,这里主要参考和整理了CS ...

  8. 【Spring Security】七、RememberMe配置

    一.概述 RememberMe 是指用户在网站上能够在 Session 之间记住登录用户的身份的凭证,通俗的来说就是用户登陆成功认证一次之后在制定的一定时间内可以不用再输入用户名和密码进行自动登录.这 ...

  9. WinMerge 过滤器用法

    WinMerge是一款开源的文件对比合并工具.http://winmerge.org/WinMerge提供了“过滤器”功能,可以在对比时排除特定的目录或文件. 1.编辑过滤规则工具 -> 过滤器 ...

  10. 【Hadoop 分布式部署 五：分布式部署之分发、基本测试及监控】

    1.对  hadoop 进行格式化 到  /opt/app/hadoop-2.5.0  目录下 执行命令:    bin/hdfs namenode -format 执行的效果图如下  (  下图成功 ...