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

 更新时间:2022年07月05日 14:39:21   作者:天行无忌  
这篇文章主要为大家介绍了二维码条形码生成的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二维码条形码的资料请关注脚本之家其它相关文章!

相关文章

  • JavaScript ES6语法中let,const ,var 的区别

    JavaScript ES6语法中let,const ,var 的区别

    这篇文章主要为大家介绍了JavaScript中let,const ,var 的区别,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • JavaScript 对象管家 Proxy

    JavaScript 对象管家 Proxy

    这篇文章主要为大家介绍了JavaScript对象管家Proxy使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 业务层hooks封装useSessionStorage实例详解

    业务层hooks封装useSessionStorage实例详解

    这篇文章主要为大家介绍了业务层hooks封装useSessionStorage实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 微信小程序 高德地图SDK详解及简单实例(源码下载)

    微信小程序 高德地图SDK详解及简单实例(源码下载)

    这篇文章主要介绍了微信小程序 高德地图详解及简单实例(源码下载)的相关资料,需要的朋友可以参考下
    2017-01-01
  • 微信小程序 UI布局常用技巧整理总结

    微信小程序 UI布局常用技巧整理总结

    这篇文章主要介绍了微信小程序 UI布局常用技巧整理总结的相关资料,现在不论是APP 还是各种软件,UI布局还是非常重要的,用户体验第一位啊,这里就整理下微信小程序的UI布局,需要的朋友可以参考下
    2016-12-12
  • Java  Spring 事务回滚详解

    Java Spring 事务回滚详解

    这篇文章主要介绍了java Spring事务回滚的相关资料,需要的朋友可以参考下
    2016-10-10
  • javascript中的箭头函数基础语法及使用场景示例

    javascript中的箭头函数基础语法及使用场景示例

    这篇文章主要为大家介绍了 javascript中的箭头函数基础语法及使用场景示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • 一文详解cornerstone Tools 基础概念

    一文详解cornerstone Tools 基础概念

    这篇文章主要为大家介绍了cornerstone Tools 基础概念详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • js c++ vue方法与数据交互通信示例

    js c++ vue方法与数据交互通信示例

    这篇文章主要为大家介绍了js c++ vue方法与数据交互通信示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • JS精髓原型链继承及构造函数继承问题纠正

    JS精髓原型链继承及构造函数继承问题纠正

    这篇文章主要为大家介绍了JS精髓原型链继承及构造函数继承问题纠正,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06

最新评论