著名的 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. 复制MIFARE Classic卡

    Mifare Classic 1K智能卡介绍及nfc-tools的使用 [原创]RFID安全之——ACR122U菜鸟初体验-『智能设备』-看雪安全论坛 复制MIFARE Classic小区门禁卡记录 ...

  2. Android之RadioButton多行

    RadioGroup设置orientation="vertical"竖向单列显示 RadioGroup设置orientation="horizontal"横向单 ...

  3. markdown的流程图实现和代码语法着色

    用flowchart为markdown添加流程图 举个例子如下,根据这个例子大家就能看懂我到底是怎么实现的 <!DOCTYPE html> <html> <head> ...

  4. uniGUI试用笔记（九）

    uniGUI执行程序部署有3种形式 1.ISAPI模式 部署在IIS或Apache,程序编译为Dll形式,没有试,准备后续专门测试一下. 2.标准执行文件模式 将软件编译成一个独立的Exe文件,包括了 ...

  5. bzoj1741 [Usaco2005 nov]Asteroids 穿越小行星群 最小点覆盖

    链接 https://www.lydsy.com/JudgeOnline/problem.php?id=1741 思路 消除所有的小行星 每个点(x,y)只有选择x或者y才能被覆盖 二分图最小点覆盖= ...

  6. Spring Security原理与应用

    Spring Security是什么 Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架.它提供了一组可以在Spring应用上下文中配置 ...

  7. 【修改缓存路径】修改Gradle缓存路径的几种方式

    起因 Android Studio的gradle在缓存处理上有时候会莫名其妙的出问题,必要时需要手动删除缓存,然后重新编译.有时也有出于其他考虑指定gradle缓存路径. 方法1:修改gradle文件 ...

  8. 【注册码】Matlab7.0（R14）注册码

    Matlab 7 (R14) 注册码1:14-13299-56369-16360-32789-51027-35530-39910-50517-56079-43171-43696-14148-64597 ...

  9. Twitter REST API, Streaming API

    原文链接           用Twitter自己的话来说:   REST API The REST API provides simple interfaces for most Twitter f ...

  10. System.ServiceProcess与System.Configuration.Install命名空间的介绍

    System.ServiceProcess 命名空间提供用于实现.安装和控制 Windows 服务应用程序的类.服务是长期运行的可执行文件,其运行没有用户界面 System.ServiceProces ...