【前端】【新手上路】原生JS实现Code39条码

最新推荐文章于 2023-07-02 22:55:33 发布
最新推荐文章于 2023-07-02 22:55:33 发布
阅读量538 收藏
点赞数
分类专栏： 笔记 文章标签： javascript html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45656279/article/details/116148326
版权
本文介绍了如何在前端开发中利用JavaScript和HTML5的Canvas API来创建Code39条形码。在毕业设计场景下，针对不定长度的货物编号，选择Code39码进行编码。通过将货物编号转化为二进制码，并在Canvas上绘制黑白线条，实现了条码的生成。最后展示了生成“00000001”条码的效果。
摘要由CSDN通过智能技术生成

需求说明
昨天在做毕业设计的时候，其中一个功能是要完成在输入货物编号后生成条形码。为了凑凑毕设说明书的字数，俺用JS+canvas做了个条形码生成器。
因为之前在编码的时候没有按照标准给货物进行编码，导致货物编号长度不定，所以这里选用不定长的code39码。
正文
在前端页面生成条码俺想到两种方法，一个是用div标签组合成图形，另外一个是canvas标签进行绘制。因为要方便保存打印，所以这里选用canvas标签的方法。

首先先给页面加入一个canvas标签

<canvas id="Canvas" width="800" height="175" ></canvas>

var c=document.getElementById("Canvas");

根据code39码的编码表做个键值对，因为货物编码只有数字，所以我只做了数字部分

	const data={
   
            "0":"0001101000",
            "1":"1001000010",
最低0.47元/天 解锁文章
把叉烧给我
关注
专栏目录
Vue3使用jsbarcode生成条形码，以及循环生成条形码
共同学习，共同成长
06-29 3023
大家好，我是码喽的自我修养！今天给大家分享​​​​​​​Vue3使用jsbarcode生成条形码，以及循环生成条形码，介绍了JsBarcode插件的详细使用方法，并提供具体代码帮助大家深入理解，彻底掌握！
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
10-20
主要介绍了JS条形码(一维码)插件JsBarcode用法,较为详细的分析了条形码插件JsBarcode编码类型、参数、属性等相关功能、使用方法与注意事项,需要的朋友可以参考下
如何用javascript 实现条形码和二维码
BradenHan的专栏
07-02 5426
请注意，这些示例只是基于JavaScript原生API的简化实现，可能无法处理更复杂的条形码和二维码编码。同样地，要生成二维码，可以使用 JavaScript 原生 API 实现 QR Code 的编码和绘制。要使用 JavaScript 原生的 API 实现条形码或二维码生成，不依赖于任何库或第三方服务，可以使用一些算法来生成对应的图形。使用适当的软件或应用程序，用户还可以生成自己的条形码或二维码来存储个人信息或实现特定功能。然后，根据输入的编码数据，将每个字符替换为对应的编码序列，并绘制条形码的条纹。
JS生成条形码(一维码)插件JsBarcode用法详解【编码类型、参数
小熊猫
06-28 3656
JsBarcode示例与设置：http://codepen.io/lindell/pen/mPvLXx?简单的JsBarcode演示：http://codepen.io/lindell/pen/eZKBdO?条码生成器：http://lindell.me/JsBarcode/generator/这里介绍一下在GitHub生成条形码的js插件→JsBarcode。JsBarcode 我们还可以设置条码的一些属性。CODE128 A/B/C (强制模式)
js-barcode:条码的纯JavaScript实现
05-20
js条形码 条码的纯JavaScript实现 当前，仅支持代码39。 在您的html中使用条形码code39.js并使用GenerateCode39函数获取条形码。 生成代码39的文档： GenerateCode39 : Generate a code 39 barcode Inputs: data : Should be something that is representable as a string. Code 39 is limited and big, so don&#39;t make the data argument too long. useCanvas : true = Draw the code 39 barcode in a 2d canvas context. false = Retur
条形码--JsBarcode
weixin_34405925的博客
01-25 1101
介绍一下在GitHub生成条形码的js插件→JsBarcode 条码支持的有: CODE128  CODE128 (自动模式切换)  CODE128 A/B/C (强制模式)EAN  EAN-13  EAN-8  EAN-5  EAN-2  UPC (A)CODE39ITF-14MSI  MSI10  MSI11  MSI1010  MSI1110PharmacodeCodabar   代码 &...
生成条码 -- jsbarcode
weixin_43910427的博客
10-16 927
作用，将文本转为条形码，不同的条码规则创建出来的条形码的大小以及疏密程度不一致 首先，安装依赖 npm install jsbarcode --save-dev 在需要的页面进行引入 import JsBarcode from 'jsbarcode'; 使用： /* @param {content} 生成条码的位置 @param {text } 用于生成条码的文本 @param {option} 默认配置项目 */ JsBarcode(content, text , opti
前端原生js实现MD5加密
最新发布
08-28
前端原生js实现MD5加密
原生JS实现轮播效果+学前端的感受(防止走火入魔)
10-21
在学习前端开发的过程中，掌握原生JavaScript轮播效果的实现是一项重要的技能。它不仅可以加深对JavaScript的理解，而且能够帮助开发者更好地控制页面元素的动态表现，而不是过度依赖第三方插件。 首先，原生...
JS实现前端路由功能示例【原生路由】
10-15
本文将深入探讨如何使用JavaScript原生方法实现前端路由，并提供一个简单的示例。 前端路由的主要目的是管理页面的导航和内容展现，它通过监听URL的变化，根据不同的路径执行不同的操作，如加载不同的组件或数据。...
js生成条形码（一维码）支持UPC-E
04-04
js生成一维码，格式支持ITF14、Code39、Code128、Codebar、EAN、UPC-A、UPC-E、MSI...
js生成一维码(条形码)
05-27
(function() { if (!exports) var exports = window; var BARS = [212222,222122,222221,121223,121322,131222,122213,122312,132212,221213,221312,231212,112232,122132,122231,113222,123122,123221,223211,221132,221231,213212,223112,312131,311222,321122,321221,312212,322112,322211,212123,212321,232121,111323,131123,131321,112313,132113,132311,211313,231113,231311,112133,112331,132131,113123,113321,133121,313121,211331,231131,213113,213311,213131,311123,311321,331121,312113,312311,332111,314111,221411,431111,111224,111422,121124,121421,141122,141221,112214,112412,122114,122411,142112,142211,241211,221114,413111,241112,134111,111242,121142,121241,114212,124112,124211,411212,421112,421211,212141,214121,412121,111143,111341,131141,114113,114311,411113,411311,113141,114131,311141,411131,211412,211214,211232,23311120] , START_BASE = 38 , STOP = 106 ; function code128(code, barcodeType) { if (arguments.length<2) barcodeType = code128Detect(code); if (barcodeType==&#39;C&#39; && code.length%2==1) code = &#39;0&#39;+code; var a = parseBarcode(code, barcodeType); return bar2html(a.join(&#39;&#39;)) + &#39;&#39; + code + &#39;&#39;; } function bar2html(s) { for(var pos=0, sb=[]; pos<s.length; pos+=2) { sb.push(&#39;&#39;); } return sb.join(&#39;&#39;); } function code128Detect(code) { if (/^[0-9]+$/.test(code)) return &#39;C&#39;; if (/[a-z]/.test(code)) return &#39;B&#39;; return &#39;A&#39;; }
原生js基于canvas实现一个简单的前端截图工具代码实例
10-16
本文介绍了一个使用原生JavaScript和HTML5 canvas元素实现的简单前端截图工具的代码实例。这个工具能够让用户在浏览器端截取网页的一部分区域，并以图像形式显示出来。以下是该工具实现的关键技术点： 1. HTML结构...
打印页面 订单号生成 条形码
weixin_30342209的博客
10-18 614
1.所用插件JsBarcode 2.下载地址：https://github.com/lindell/JsBarcode 3.用法： <script> JsBarcode("#JsBarcode", "123", { format: "CODE39",//选择要使用的条形码类型 width:3,//设置条之间的宽度 height:100,//高度 ...
前端生成条形码
qq_40409143的博客
11-29 2006
项目场景： 比如商品的信息对应的二维码 例如：生成如下的物流信息条形码 问题描述： 解决方案： 下载插件： 这样就可以生成想要的条形码啦，另外补充一下该插件常用的参数： 插件的安装 感谢您的阅读，谢谢支持！ ...
jsBarcode生成条形码
打工人的博客
04-18 4688
1.pc端/移动端生成条形码 html <svg id="svgcode"></svg> <canvas id="canvascode"></canvas> <img id="imgcode" /> js <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src
JavaScript数据数据类型判断
codezha的博客
01-08 167
数据类型 基本数据类型：string、number、boolean、null、undefined、symbol 引用数据类型：object、array、function typeof typeof操作符返回一个字符串，表示未经计算的操作数的类型 console.log(typeof 42); // expected output: "number" console.log(typeof 'blubber'); // expected output: "string" console.log(type.
前端如何生成条形码---JsBarcode
Jane_Serry@CSDN博客
03-09 2066
React 生成条形码代码 注：需引入jsbarcode插件 import React from 'react'; import JsBarcode from 'jsbarcode'; class Widget extends React.Component { constructor(props) { super(props); this.state = {...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

把叉烧给我

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值