条形码--JsBarcode（银联二维码用过）

介绍一下在GitHub生成条形码的js插件→JsBarcode

条码支持的有:

CODE128
CODE128 (自动模式切换)
CODE128 A/B/C (强制模式)
EAN
EAN-13
EAN-8
EAN-5
EAN-2
UPC (A)
CODE39
ITF-14
MSI
MSI10
MSI11
MSI1010
MSI1110
Pharmacode
Codabar

<!DOCTYPE html>
<html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" /> <title></title> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="js/JsBarcode.all.js"></script> </head> <body> <svg id="svgcode"></svg> <!-- or --> <canvas id="canvascode"></canvas> <!-- or --> <img id="imgcode" /> <script>  $("#svgcode").JsBarcode('Hi!');//or JsBarcode("#svgcode", "Hi!");  $("#canvascode").JsBarcode('Hello world!');//or JsBarcode("#canvascode", "Hello world!");  $("#imgcode").JsBarcode("I'm huangenai!");//or JsBarcode("#imgcode", "I'm huangenai!");    </script>  </body></html>

JsBarcode 我们还可以设置条码的一些属性（可设置属性详细介绍链接：https://github.com/lindell/JsBarcode/wiki/Options）

<img id="imgcode" />        <script>  JsBarcode("#imgcode", "123", {format: "CODE39",//选择要使用的条形码类型width:3,//设置条之间的宽度height:100,//高度displayValue:true,//是否在条形码下方显示文字text:"456",//覆盖显示的文本fontOptions:"bold italic",//使文字加粗体或变斜体font:"fantasy",//设置文本的字体textAlign:"left",//设置文本的水平对齐方式textPosition:"top",//设置文本的垂直位置textMargin:5,//设置条形码和文本之间的间距fontSize:15,//设置文本的大小background:"#eee",//设置条形码的背景lineColor:"#2196f3",//设置条和文本的颜色。margin:15//设置条形码周围的空白边距
});</script>

GitHub：https://github.com/lindell/JsBarcode

条码生成器：http://lindell.me/JsBarcode/generator/

JsBarcode示例与设置：http://codepen.io/lindell/pen/mPvLXx?editors=1010

简单的JsBarcode演示：http://codepen.io/lindell/pen/eZKBdO?editors=1010

转载于:https://www.cnblogs.com/ourLifes/p/8310692.html

条形码--JsBarcode（银联二维码用过）相关推荐

vue中生成条形码(jsbarcode)、二维码(qrcodejs2)
1.条形码插件jsbarcode 安装:npm install jsbarcode --save 引入:在需要生成条形码的页面引入即可 import JsBarcode from 'jsbarcode ...
银联二维码支付与微信支付相比，哪个好用？
2019独角兽企业重金招聘Python工程师标准>>> 近日,中国银联联合40多家商业银行正式推出了二维码支付产品.扫码支付你应该早就不陌生了.现在即使是摆在街边的水果摊也有二维码让 ...
JS获取URL参数（银联二维码用过）
//获取URL参数 name 参数名称 GetQueryString (name) { var search = document.location.hash; var pattern = new ...
OPT小讲堂 ∣ SciSmart图像识别之条形码识别、二维码识别
在第十三课中,我们讲了图像识别中的OCR:字符识别. 本课将继续介绍图像识别中的条形码识别.二维码识别.我们将分别介绍二者的基本概念.操作流程.参数解析及应用案例. 条形码识别条形码识别的概念条形 ...
C# 生成一维码（条形码）和二维码
前言在使用C#语言进行客户端软件开发时很多时候我们会有需要生成二维码和一维码的需求,在智能工厂和一些商品扫码之类的软件中应用居多,此文章简单记录了一维码和二维码的编码格式和使用ZXing库生成二维码 ...
【Android】实现生成二维码、条形码和扫描二维码的功能
目录一.添加依赖二.布局文件三.实现生成二维码的功能四.效果图一.添加依赖要先添加一个第三方库来实现二维码的生成以及扫描二维码的功能,开源库如下: 在build.grade(Moudle) ...
H5实现扫码读取二维码条形码功能（二维码+条形码)
本文主要介绍二维码实现的原理 1.使用插件 npm install @zxing/library 2.主要用到 BrowserMultiFormatReader 这个构造函数,用于打开摄像头 impo ...
VUE iscroll（银联二维码，浩哥页面用过）
基本使用方法: $ npm i vue-iscroll-view --save-dev $ npm i iscroll --save-dev import IScrollView from 'vue- ...
vue 生成条形码、二维码
条形码 1.安装 cnpm install jsbarcode --save 2.引入 import JsBarcode from 'jsbarcode' 3.二维码容器 <svg id=&qu ...

条形码--JsBarcode（银联二维码用过）

条形码--JsBarcode（银联二维码用过）相关推荐

最新文章

热门文章