Angular.js实现扫码枪扫码并生成二维码
前言
举个例子:
商品都有自己的序列号 SN
。那么当我们将这些商品打包的时候,我们就需要生成一份商品的 SN
清单,将其贴在箱子的表面以查看。但是冗长的序列号占位比较大,那么,我们是否可以将这些商品的序列号生成一个二维码呢?然后,我们可以通过扫码就知道这个箱子里面装的是什么序列号的产品。
扫码枪扫码
这个比较简单,首先,我们拿到扫码枪,将其和电脑连接起来。
然后,将鼠标光标放在输入框或者导航栏内,将扫码枪对准商品的序列号条形码进行扫描,相应的内容就会在页面中展示出来。
本文只考虑输入框的情况
为此,我们在页面中构建一个输入框。
核心 html 代码:
<nz-input-group [nzSuffix]="suffixIconSearch"> <input type="text" nz-input placeholder="请将鼠标聚焦到该点再使用扫码枪扫码" [(ngModel)]="value" (input)="changeVal()"/> </nz-input-group> <ng-template #suffixIconSearch> <span nz-icon nzType="scan"></span> </ng-template>
核心 typescript 代码:
public value:string = ''; //输入框的值,扫码枪扫进去的值 public hintValue: string = ''; // 提示信息 // 监听值的变化 public changeVal():void { this.interval$.unsubscribe(); // rxjs 的 interval 方法 this.valTimer && clearTimeout(this.valTimer); this.valTimer = setTimeout(() => { this.hintValue = '添加中...' this.scanQRCode(); clearTimeout(this.valTimer); }, 500) }
这里我们使用了 ant design angular
,并结合了 rxjs
生成二维码
实现该功能,我们使用了包 bwipjs。这里有个简单的用法案例:
<!-- html --> <canvas id="qrcode"></canvas>
// javascript window.onload = function() { let qrcodeDom = document.getElementById('qrcode'); let canvas = bwipjs.toCanvas(qrcodeDom, { bcid: 'datamatrix', // 码类型 text: '110112119', // 码内容 scale: 3, // 缩放比例 height: 20, // 高 width: 20, // 宽 scaleX: 3, // x轴比例 scaleY: 3, // y轴比例 includetext: true, // 展示可读的文本 textxalign: 'center' // 文本位置 }); }
相关的参数说明,我们可以直接查看 bwipjs。这里不进行赘述。
实际上,我们使用的 bcid
类型是 qrcode
。因为生成的这个二维码我们需要添加站点进去,当用户用手机扫描这个二维码之后,能够跳转到对应的站点。
感兴趣的读者可以自行尝试验证。
Thanks for reading.
以上就是Angular.js实现扫码枪扫码并生成二维码的详细内容,更多关于Angular.js扫码枪扫码生成二维码的资料请关注脚本之家其它相关文章!
相关文章
AngularJS基础 ng-model-options 指令简单示例
本文主要介绍AngularJS ng-model-options 指令,这里对ng-model-options指令的基本资料进行整理,有需要的小伙伴可以参考下2016-08-08Angular 4依赖注入学习教程之InjectToken的使用(八)
这篇文章主要给大家介绍了关于Angular 4依赖注入之InjectToken使用的相关资料,文中介绍的非常详细,对大家学习或者使用Angular4具有一定的参考学习价值,需要的朋友们下面来跟着小编一起学习学习吧。2017-06-06解决ng-repeat产生的ng-model中取不到值的问题
今天小编就为大家分享一篇解决ng-repeat产生的ng-model中取不到值的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
最新评论