著名的 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. Jenkins实现SVN+Maven+Java项目的持续集成

    Jenkins 2.46.1 Centos 7.3 JDK 7 安装jdk/maven/svn 在Jenkins所在的Linux机器安装jdk和maven,步骤就不说了,下面是环境变量: export ...

  2. nginx负载均衡fair方式分发

    fair采用的不是内建负载均衡使用的轮换的均衡算法,而是可以根据页面大小.加载时间长短智能的进行负载均衡. 这算是没有安装fair的情况 [root@localhost sbin]# ./nginx ...

  3. centos 7.2 安装gitlab汉化

    ####################你如果搜到我的这个博客,你的系统得是centos 7的   80端口没有占用.  QQ:1394466404   这个博客维护1年 #### 多地方第一个是百度 ...

  4. shelve模块,sys模块,logging模块

    1.shelve模块 用于序列化的模块,shelve模块比pickle模块简单,只有open函数,返回类似字典的对象,可读可写;key必须为字符串,而值可以是python所支持的数据类型. impor ...

  5. 针对Xcode 9 + iOS11 的修改，及iPhone X的适配

    1,UIScrollView的automaticallyAdjustsScrollViewInsets 失效了. automaticallyAdjustsScrollViewInsets,当设置为YE ...

  6. Actions对Element的一些操作解析

    针对Chrome浏览器: 在自动化测试的编写中如果报出Element is not visible to click at xxxx point时,我会使用: new Actions(WebDrive ...

  7. Codeforces Round #535 (Div. 3) 解题报告

    CF1108A. Two distinct points 做法:模拟 如果两者左端点重合就第二条的左端点++就好,然后输出左端点 #include <bits/stdc++.h> usin ...

  8. shiro 前后端分离 seseeionId 问题

    http://www.cnblogs.com/cshhs/p/9269411.html https://www.w3cschool.cn/shiro/rmvk1if1.html http://www. ...

  9. 【Hadoop 分布式部署 一 ：分布式部署准备虚拟机 】

    一.将IP配置为静态 按照 下面的操作将IP配置为静态IP  这个静态的IP地址 是你自己设置的,只要符合虚拟机的IP段就可以.最后点击 Apply  需要root密码 将网络断开 (在网络图标左键  ...

  10. 案例2：用一条SQL查询出数学语文成绩都大于80分的学生姓名?

    方法1: 查出科目成绩有小于80分的学生姓名,再约束并去重学生不等于查出来的姓名 select distinct A.name from t_score A where A.name not in(s ...