二维码条形码生成的JavaScript脚本库

目录
  • 引言
  • 条形码
  • 二维码

引言

二维码或条形码在日常生活中现在应用已经非常普遍了，文章分享生成条形码和二维码的JavaScript库。

条形码

条形码是日常生活中比较常见的，主要用于商品。通俗的理解就是一串字符串的集合（含字母、数字及其它ASCII字符的集合应用），用来常用来标识一个货品的唯一性，当然还有更多更深入与广泛的应用，像超市的商品、衣服、微信、支付宝、小程序等到处都有条形码的广泛应用；

安装依赖：

npm install jsbarcode --save-dev

在 HTML 页面上加入以下代码：

<svg id="barcode"
  jsbarcode-value="123456789012"
  jsbarcode-format="code128"></svg>

接下来看下 JavaScript 代码，如下：

import jsbarcode from 'jsbarcode';
const createBarcode = (value, elemTarget) => {
    jsbarcode(elemTarget, "value");
};
createBarcode("#barcode", "devpoint");

运行成功的效果如下：

二维码

相比条形码，二维码的使用场景也越来也多，支付码、场所码、小程序等等。二维码的长相经常是在一个正方形的框中填充各种点点或无规则小图形块而构成的图形，这种称之为二维码，他与一维码最大的区别就是存储容量大很多，而且保密性好。二维码本质上表现给大家的就是一个静态图片，其实是包含特字加密算法的图形，里面存储的是一串字符串（即字母、数字、ASCII码等），这说明二维码不仅存储量大，而且存储的内容很广泛，数字、字母、汉字等都可以被存储。

安装依赖：

npm install qrcode --save-dev

HTML：

<canvas id="qrcode"></canvas>

JavaScript：

import QRCode from "qrcode";
const createQrcode = (value, elemTarget) => {
    QRCode.toCanvas(document.querySelector(elemTarget), value);
};
createQrcode("#qrcode", "devpoint");

效果如下：

以上就是二维码条形码生成的JavaScript脚本库的详细内容，更多关于JavaScript二维码条形码的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 使用javascript解析二维码的三种方式

    目录 一.使用javascript解析二维码 1.二维码是什么 二.qrcode-parser 1.安装方式 2.使用方式 三.ngx-qrcode2 1.安装方式 2.使用方式 四.前端生成二维码 1.安装方式 2.使用方式 3.案例一:生成二维码的代码模板 4.案例二:读取二维码 一.使用javascript解析二维码 1.二维码是什么 二维码就是将我们能看懂的文字语言,以机器语言的形式存储了起来.其中黑色小方块代表的是1,白色小方块代表的是0,黑白相间的图案其实就是一串编码,扫码的过程就是

  • 使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解

    下面通过实例代码给大家介绍js扫码枪扫描条形码的实现方法,具体代码如下所示: var keycode = ""; var lastTime=null,nextTime; var lastCode=null,nextCode; document.οnkeydοwn=function(e){ if(window.event){ // IE nextCode = e.keyCode } else if(e.which){ // Netscape/Firefox/Opera nextCode

  • Javascript公共脚本库系列(一): 弹出层脚本

    Javascript公共脚本库系列(一): 弹出层脚本

    一.摘要 本系列文章是为了抽象通用的,跨浏览器的脚本方法. 本篇文章讲解弹出浮动层的javascript函数, 以及函数的原理和使用注意事项. 二.实现效果 用脚本弹出浮动层是我们最常用的脚本方法之一.下面是效果图:  点击图中的"航空公司"后,会在"航空公司"下面弹出浮动层. 在网上弹出框的脚本相当多, 而且还有各种第三方JS框架可供我们使用.但是其中有的脚本过于简单,仅仅粗略的实现弹出效果而忽略了灵活性,通用性和跨浏览器特性. 使用JS框架又有些杀鸡用牛刀.所以

  • 浅谈js二维码扫码登录是什么原理

    浅谈js二维码扫码登录是什么原理

    目录 二维码登录的本质 认识二维码 系统认证机制 扫描二维码登录的一般步骤 大概流程 二维码准备 扫描状态切换 状态确认 总结 前几天看了极客时间一个二维码的视频,写的不错,这里总结下 在日常生活中,二维码出现在很多场景,比如超市支付.系统登录.应用下载等等.了解二维码的原理,可以为技术人员在技术选型时提供新的思路.对于非技术人员呢,除了解惑,还可以引导他更好地辨别生活中遇到的各种二维码,防止上当受骗. 二维码,大家再熟悉不过了 购物扫个码,吃饭扫个码,坐公交也扫个码 在扫码的过程中,大家可能会

  • JavaScript脚本库编写的方法

    JavaScript脚本库编写的方法

    JavaScript就是所谓的客户端脚本语言,是一种在互联网浏览器(浏览器也称为Web客户端,因为它连接到Web服务器上,以下载页面)内部运行的计算机编程语言.JavaScript的工作方式很有趣.普通网页内都会插入一些JavaScript代码.当浏览器加载该页面时,浏览器的内置解释器将读取并运行它在该页面中找到的JavaScript代码. 做Web开发已经四年,或多或少积累了一些JavaScript脚本.比如,限制input只允许输入数字的脚本:敲回车自动转到下一个控件,相当于Tab键的作用一

  • 使用JavaScript根据图片获取条形码的方法

    使用JavaScript根据图片获取条形码的方法

    最近在弄一个零售超市的项目,但是苦于需要自己录入数据,超市少的也有1000多种商品,自己一个一个录入肯定不太现实,所以考虑扫描商品的条形码,根据条形码获取商品的信息这样效率就高多了. 根据条形码获取商品信息这个在网上有很多api一般都是付费的费用不高,可以直接拿来用,这里就略过了. 这里重点说说JavaScript识别图片中的条形码. 开源库quaggaJS 项目地址:https://github.com/serratus/quaggaJS 这里要感谢大神提供这么牛B的js库,让我的想法得以实现

  • 二维码条形码生成的JavaScript脚本库

    二维码条形码生成的JavaScript脚本库

    目录 引言 条形码 二维码 引言 二维码或条形码在日常生活中现在应用已经非常普遍了,文章分享生成条形码和二维码的JavaScript库. 条形码 条形码是日常生活中比较常见的,主要用于商品.通俗的理解就是一串字符串的集合(含字母.数字及其它ASCII字符的集合应用),用来常用来标识一个货品的唯一性,当然还有更多更深入与广泛的应用,像超市的商品.衣服.微信.支付宝.小程序等到处都有条形码的广泛应用: 安装依赖: npm install jsbarcode --save-dev 在 HTML 页面上

  • 基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作

    基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作

    在很多项目里面,对条形码和二维码的生成和打印也是一种很常见的操作,在Web项目里面,我们可以利用JS生成条形码和二维码的组件有很多.本文引入两个比较广泛使用的JS组件,用来处理条形码和二维码的生成处理,并介绍如何利用CLODOP组件实现内容的打印输出. 生成条形码使用组件JsBarcode,生成二维码使用组件qrcodejs. 1.条形码的生成 条码的作用一般在一些商品标签上,方便使用条码枪快速.准确录入信息. 如下所示是一种条形码 这里条形码生成使用了JsBarcode组件进行处理,它支持很多

  • 二维码的生成细节和原理

    二维码的生成细节和原理

    二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型:比如:字符,数字,日文,中文等等.这两天学习了一下二维码图片生成的相关细节,觉得这个玩意就是一个密码算法,在此写一这篇文章 ,揭露一下.供好学的人一同学习之. 关于QR Code Specification,可参看这个PDF:http://raidenii.net/files/datasheets/misc/qr_c

  • Android基于google Zxing实现二维码的生成

    最近项目用到了二维码的生成与识别,之前没有接触这块,然后就上网搜了搜,发现有好多这方面的资源,特别是google Zxing对二维码的封装,实现的已经不错了,可以直接拿过来引用,下载了他们的源码后,只做了少少的改动,就是在Demo中增加了长按识别的功能,网上虽然也有长按识别的Demo,但好多下载下来却无法运行,然后总结了一下,加在了下面的Demo中.   下面来介绍这个Demo的主类 public class BarCodeTestActivity extends Activity { priv

  • 基于canvas的二维码邀请函生成插件

    基于canvas的二维码邀请函生成插件

    这是17年的第一篇博文,话说这天又是产品同学跑过来问我说:hi,lenny,你看现在市面上流行各种装逼H5,随便输入点名字啥的就给我生成房产证了,这种还可以分享出去,传播率可高了,或者你再看这里,一键生成邀请函,牛逼吧,要不你也帮我做一个这个功能,我去玩点传播手段. 我看见效果后第一反映就是,肯定canvas进行的图片拼接,现在市面上流行的效果具体是如何实现的我没有去看源码,思路很清晰,于是晚饭后没有下班,开始我的插件制作之旅了. 首先,我们需要思考,既然是图片处理,那么就必然存在图片下载,我们

  • PHP二维码的生成与识别案例

    PHP二维码的生成与识别案例

    二维码的分类 线性堆叠式二维码 矩阵式二维码 二维码的优缺点 优点 信息容量大 编码范围广 容错能力强 译码可靠性高 可引入加密措施 成本低,易制作 缺点 二维码技术成为手机病毒.钓鱼网站传播的新渠道 信息泄密 目前流行的三大国际标准 PDF417:不支持中文 DM:专利未公开,需支付专利费用 QR CODE:专利公开,支持中文 QR CODE 纠错能力 L级:约可纠错7%的数据码字 M级:约可纠错15%的数据码字 Q级:约可纠错25%的数据码字 H级:约可纠错30%的数据码字 前提条件 GD库

  • 基于Java实现二维码的生成和解析

    目录 导入相关jar包 二维码工具类编 创建二维码图片 二维码设置logo 将文明说明增加到二维码上 解析二维码 main方法测试类 最近因个人需求需要对根据内容生成二维码和进行解析!记录一下!二维码其实就是一种编码技术,只是这种编码技术是用在图片上了,将给定的一些文字,数字转换为一张经过特定编码的图片.这里利用的是 google 公司的 zxing使用方便,可以操作条形码或者二维码等 导入相关jar包 <!-- 二维码 --> <dependency> <groupId&g

  • IOS笔记061之二维码的生成和扫描

    如今二维码随处可见,无论是实物商品还是各种礼券都少不了二维码的身影.而手机等移动设备又成为二维码的一个很好的应用平台,不管是生成二维码还是扫码二维码.本篇文章从生成二维码.扫描二维码展开分析,通过内容分析二维码用起来也很easy了. 首先说下生成二维码 二维码可以存放纯文本.名片或者URL 其次生成二维码的步骤: 导入CoreImage框架 再次通过滤镜CIFilter生成二维码 1.创建过滤器 2.恢复滤镜的默认属性 3.设置内容 4.获取输出文件 5.显示二维码 代码实现 CoreImage

  • iOS二维码的生成代码

    iOS二维码的生成代码

    本文实例为大家分享了iOS二维码的生成代码,供大家参考,具体内容如下 一.工程图. 二.代码. ViewController.m #import "ViewController.h" #import "ScanViewController.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // D

  • iOS二维码的生成和扫描

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 属性 @property (strong,nonatomic)AVCaptureDevice * device; @property (strong,nonatomic)AVCaptureDeviceInput * input; @property (strong,nonatomic)AVCaptureMetadataOutput * output; @property (strong,nonatomic)AV

随机推荐