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

news2024/11/19 6:30:33

二维码或条形码在日常生活中现在应用已经非常普遍了,文章分享生成条形码和二维码的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"); 

效果如下:

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/724.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【机器学习基础】 线性回归

线性回归1、线性回归定义2、线性回归题目示例3、推导公式4、误差5、似然函数6、线性回归评价指标7、梯度下降1、线性回归定义 经典统计学习技术中的线性回归和softmax回归可以视为 线性神经⽹络。给定训练数据特征 X 和对应的已知标签 y &#xff0c;线性回归的⽬标是找到⼀组权…

Seata安装启动

一、下载 https://github.com/seata/seata/releases/download/v1.4.2/seata-server-1.4.2.zip 二、启动 在安装路径下cmd seata-server.bat -h 127.0.0.1 -m file 三、作用 Seata是分布事务解决方案&#xff0c;seata保证微服务远程调用业务的原子性 Seata将为用户提供了 …

Spring Cloud LoadBalancer--负载均衡的原理(源码分析)

原文网址&#xff1a;Spring Cloud LoadBalancer--负载均衡的原理&#xff08;源码分析&#xff09;_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍Spring Cloud LoadBalancer负载均衡的原理。 SpringCloud从2020版本开始移除了对Ribbon的依赖&#xff0c;官方使用Spring Cl…

VsCode中一些可以让工作“事半功倍”的插件

1.GitLens — Git supercharged 这个插件可以查看代码修改的消息&#xff0c;比如是谁修改的以及修改时间 2.Chinese (Simplified) (简体中文) 简体中文&#xff0c;这个可以说是装的最多的一款插件了 3.Auto Close Tag 标签自动补全 4.Auto Rename Tag&#xff1a;自动完…

2021第7届中国大学生程序设计竞赛CCPC广州站, 签到题4题

文章目录I.Pudding StoreH.Three IntegersC.NecklaceF.Cactus补题链接&#xff1a;https://codeforces.com/gym/103415 I.Pudding Store I. Pudding Store time limit per test2.0 s memory limit per test512 megabytes inputstandard input outputstandard output 159 is a…

快速排序图解(两种思想)

七大排序之快速排序 文章目录七大排序之快速排序前言一、《算法导论》中的分区思想1.1 算法思想1.2 代码实现二、Hoare挖坑法2.1 算法思想2.2 代码实现三、算法分析四、注意事项总结前言 博主个人社区&#xff1a;开发与算法学习社区 博主个人主页&#xff1a;Killing Vibe的博…

【每天学习一点新知识】网络安全--截获攻击

截获攻击原理和后果 原理 若正常传输路径为终端A到终端B&#xff0c;黑客首先改变传输路径为终端A—黑客终端—终端B&#xff0c;使得传输信息必须经过黑客终端&#xff0c;黑客终端就可以截获终端A传输给终端B的消息。 后果 目前很多访问过程采用明码方式传输登录的用户名和密…

C++入门基础(下)

目录 引用 引用概念 引用特性 1.引用在定义时必须初始化 2.一个变量可以有多个引用 3.引用一旦引用一个实体&#xff0c;再不能引用其他实体. 常引用 使用场景 1.作为参数使用 2.作为返回值使用 引用和指针的区别 内联函数 内联函数的概念 内联函数特性 宏的优缺点 auto关键字 …

scala spark dataframe 时间加减

参考Adding 12 hours to datetime column in Spark 只针对标准化时间戳 yyyy-MM-dd HH:mm:ss 如果是 yyyy-MM-dd HH:mm 转换后会自动补到 HH:mm:ss ss位补0 时间英文简写查询 HOUR 代表小时 MINUTE 代表分钟 SECOND 代表秒 DAY MONTH YEAR 正数代表向后 负数代表向前 …

AI绘画突然爆火?快速体验二次元画师NovelAI(diffusion)

目录0 写在前面1 diffusion vs GAN2 NovelAI3 AI绘画环境搭建4 体验AI创作0 写在前面 机器学习强基计划聚焦深度和广度&#xff0c;加深对机器学习模型的理解与应用。“深”在详细推导算法模型背后的数学原理&#xff1b;“广”在分析多个机器学习模型&#xff1a;决策树、支持…

到了30岁,我才有了深刻的感悟:千万不要一辈子靠技术生存

千万不要一辈子靠技术生存&#xff0c;这句话&#xff0c;我也是到了快30岁才有了深刻认知。 当我20多岁&#xff0c;年收入2-3W的时候&#xff0c;我会认为说这话的人都是自身技术不咋地&#xff0c;想靠技术吃饭吃不了。 然而&#xff0c;快30岁了&#xff0c;虽然技术小有…

【Java】之IO流

个人主页&#xff1a;天寒雨落的博客_CSDN博客-C,CSDN竞赛,python领域博主 特别标注&#xff1a;仅为自己的学习记录笔记&#xff0c;方便复习和加深记忆&#xff0c;仅供借鉴参考&#xff01; 目录 IO流概述 IO流分类 按数据的流向 按数据类型 字符流 字节流 字节流写数…

【Linux】虚拟机安装Ubuntu后的一些通用设置

文章目录前言一、虚拟机缩放设置二、实现本机和虚拟机之间复制粘贴共享三、ubuntu中vi文件时方向键等问题四、虚拟机扩容五、时区和时间格式设置六、防火墙相关七、中文输入法问题八、虚拟机和主机之间的互通前言 主要是记录虚拟机中安装ubuntu后一些常规设置操作。 一、虚拟…

当你使用MPLS时,不要忘记还有SD-WAN!

企业网络管理人员和IT部门主管在考虑其WAN架构时最常见的问题就是&#xff1a;“为什么我要选择SD-WAN而不是MPLS&#xff1f;”确实&#xff0c;选择新技术时通常会带来“不确定性”。 与MPLS相比&#xff0c;SD-WAN更便宜&#xff0c;性能更强&#xff0c;也带来了更低成本的…

IDEA安装及Clone代码

IDEA安装及Clone代码 文章目录1.IDEA下载2.IDEA安装3 IDEA clone(克隆) 代码1.IDEA下载 官网下载地址&#xff1a; DEA 分为两个版本&#xff1a; 旗舰版(Ultimate)和社区版(Community)。 旗舰版&#xff1a;收费(限 30 天免费试用)&#xff0c;功能全面&#xff0c;插件丰富…

公众号查题系统搭建

公众号查题系统搭建 本平台优点&#xff1a; 多题库查题、独立后台、响应速度快、全网平台可查、功能最全&#xff01; 1.想要给自己的公众号获得查题接口&#xff0c;只需要两步&#xff01; 2.题库&#xff1a; 查题校园题库&#xff1a;查题校园题库后台&#xff08;点击…

刚来的00后真的卷,听说工作还没两年,跳到我们公司直接起薪20k...

前段时间我们公司来了个00后&#xff0c;工作都没两年&#xff0c;跳槽到我们公司起薪18K&#xff0c;都快接近我了。后来才知道人家是个卷王&#xff0c;从早干到晚就差搬张床到工位睡觉了。 最近和他聊了一次天&#xff0c;原来这位小老弟家里条件不太好&#xff0c;一大家子…

c++内存管理:

目录 new和delete 使用方法&#xff1a; 注意事项&#xff1a; new申请不需要检查返回值 operator new和operator delete函数的讲解 c语言申请内存有哪些方法&#xff1a; 答&#xff1a;malloc calloc realloc三种 #include<stdlib.h> void test() {int*p1 (in…

Day11-尚品汇-退出登录

1.在Header组件里面&#xff1a; 1》绑定一个click事件 2》写其触发的方法 2.发请求通知服务器 1》先观察文档 2》.在api里面写代码&#xff1a; 3》在store仓库user.js里面也要写代码&#xff1a; 1&#xff09; 不单单向服务器发请求清除token&#xff0c;而且需要清除use…

【MLOPs】Docker

&#x1f50e;大家好&#xff0c;我是Sonhhxg_柒&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f4dd;个人主页&#xff0d;Sonhhxg_柒的博客_CSDN博客 &#x1f4c3; &#x1f381;欢迎各位→点赞…