著名的 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. ionic + angular + cordova, 打造专属自己的App！

    ionic 学习地址:http://ionicframework.com/ ionic 好处: ionic serve --lab  预览平台间的差异化 sass                  提 ...

  2. 让bat批处理后台运行,不显示cmd窗口(完全静化)

    背景:由于我有某云的服务器(win server), 上面挂有好几个程序, 为了更好的监控他们, 我使用了一个最笨的方法, 就是下面的方法. 实现:我要监控的程序有三个, 成为ABC吧, 下面先把三个 ...

  3. 转：网卡、光纤网卡、ISCSI卡有什么区别？

    网卡.光纤网卡.ISCSI卡有什么区别? 感谢: http://www.it.com.cn/f/server/063/6/241650.htm 在讨论这个问题的时候,需要先说清楚一个问题:我们知道,在 ...

  4. java利用poi生成excel文件后下载本地

    1.该功能需要poi的jar包,链接: http://pan.baidu.com/s/1migAtNq 密码: 38fx. 2.首先新建一个实体类,用以存放单个数据 public class Test ...

  5. topcoder srm 495 div1

    problem1 link 从前向后确定一下,然后再从后向前确定一下.一样的话就是可以确定的. problem2 link 首先将强连通分量缩点.理论上来说,只需要遍历所有入度为0的联通块中的一个即可 ...

  6. 用uniGUI做B/S下业务系统的产品原型体验

    从10月份到重庆工作后,一直忙于工作,感兴趣的几个方面的技术都处于暂停. 一个多月来,按照公司要求在做B/S集中式基卫产品的原型,主要是画原型图,开始是用Axure,弄来弄去感觉功能还是弱了些,尤其是 ...

  7. Bootstrap3基础 list-inline 无序列表横向显示

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  8. Restful framework【第九篇】分页器

    基本使用 分页 -简单分页 page_size = api_settings.PAGE_SIZE :每页显示条数 page_query_param = 'page' :查询的页码数 page_size ...

  9. BottomNavigationBar 底部导航控件

    BottomNavigationBar 底部导航控件 属性 说明BottomNavigationBarItem 多个 item,iconSize icon大小currentIndex 默认选中第几个o ...

  10. Sorting arrays in NumPy by column

    https://stackoverflow.com/questions/2828059/sorting-arrays-in-numpy-by-column I suppose this works:  ...