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

本文介绍了如何在前端开发中利用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
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

把叉烧给我

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

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

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

打赏作者

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

抵扣说明:

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

余额充值