著名的 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. Excel vba map/dictionary

    今天在调整一生成java代码的工具时,要用到在不同语言间互转数据类型的逻辑,原来的代码中根据excel记录的行号来计算,再到另外一个collection中获取,个人想着这也太土鳖了,于是搜了下,在vb ...

  2. 2018-2019-1 20189206 《Linux内核原理与分析》第四周作业

    linux内核分析学习笔记 --第三章 MenuOS的构造 计算机的"三大法宝"和操作系统的"两把宝剑" 三大法宝 程序存储计算机 即冯诺依曼体系结构,基本上是 ...

  3. jQuery中清空元素.empty()和.html('')，两种方法的对比

    jQuery 中有 .empty() 和 .html() 两种方式,都能够清空所选父元素中的所有子元素.但是这两者清空元素的方式上,有着很大的区别: 1.empty() jQuery对象.empty( ...

  4. android 去掉主题

      1 可以在xml中配置2.0之后 <application android:allowBackup="true" android:icon="@drawable ...

  5. IDEA安装与破解

    今天下午偶然在知乎上看到IDEA和eclipse的软件分析,所以装了一个IDEA,不过肯定是破解,不会购买激活码 IDEA官网:http://www.jetbrains.com/idea/ 安装教程: ...

  6. 指针delete之后赋值为null

    1.现象 经常看到有些代码在delete之后赋值为null 2.原因 C++标准规定:delete空指针是合法的,没有副作用. 所以我们在Delete指针后赋值为NULL或0是个好习惯.对一个非空指针 ...

  7. 碎碎念android eMMC【转】

    本文转载自:https://blog.csdn.net/Fybon/article/details/44242549 一./dev/blockroot@:/dev/block #ls bootdevi ...

  8. smbclient和mount -t cifs共享win的共享文件夹? autocad小记

    插入U盘没有反应? 首先,打开设备管理器, 发现usb大容量设备为黄色感叹号 其次, 将这个usb大容量设备先卸载, 然后点击"自动扫描硬件变化",就可以重新自动安装usb的驱动. ...

  9. 為什麼gnome-terminal中不能使用ctrl_shift_f來進行查找? 是因為 跟输入法的全局设置衝突了!

    但是,也要注意, 为什么ctrl+shift_f有时候可以使用, 有时候又不可以使用? 是因为, 这个跟输入法的状态有关, 如果输入法是英文, 那么中文的 "简体/繁体切换快捷键ctrl+s ...

  10. sudo用法记录

    使用root用户,visudo命令(实际是编辑/etc/sudoers文件),用法和vim一样,末行模式:wq退出,如还有提示,使用大写"Q"保存退出,小写"e" ...