原生JS如何实现可配置DM码
原生JS如何实现可配置DM码
一、 DM码简介
1、 Data Matrix码
Data Matrix码是一种二维条形码,简称DM码,由美国公司International Data Matrix, Inc.(I.D. Matrix)在1994年发明,Data Matrix码中的行数和列数随二维码中存储的信息量而增加,信息限值是2335个字母数字字符。
1)Data Matrix码的外观
Data Matrix码通常是方形,有时也为矩形,由按网格或“矩阵”排列的多个明暗方形点或“单元格”组成,由码一侧的L形图案定义,并形成两条实线相邻边界。这种“寻像图形”可帮助相机扫描仪定位二维码。
2)如何扫描Data Matrix码
可以使用Data Matrix码扫描仪或全向相机扫描仪从任何角度扫描Data Matrix码。一些智能手机摄像头能对Data Matrix码进行扫描,但许多智能手机没有内置功能,需要第三方应用程序来读取信息。
2、QR码
提到了DM码就不说一下QR码,二者同属于二维码。QR码也能从任何角度读取。由日本的电装株式会社(Denso Corporation)于1994年发明,最多可存储4296个字母数字字符,具体取决于其中包含的行数和列数。
1)QR码的外观
QR码是由在对比背景上按网格排列的深色或浅色方格组成。
为了帮助扫描仪识别二维码,QR码在码左上角、右上角和左下角的三个相同方形结构中包含“寻像图形”。
2)如何扫描QR码?
与Data Matrix码一样,QR码可以使用专门QR码扫描仪或相机扫描仪从任何方向进行扫描。近年来,一些手机制造商已开始将QR码读取加入标准相机功能中。因此,在面向客户的应用中,QR码比Data Matrix码略有优势,因为用户可以直接使用手机摄像头扫描二维码,而无需使用专门的应用程序。
3、Data Matrix码和QR码有什么区别?
QR Code采用的是矩阵式编码,将数据按照一定规则编码成黑白方块,即使部分区域损坏或遮挡也能正确读取。
Data Matrix采用的是方格式编码,将数据编码成黑白方格,并且具有高密度的数据存储能力。Data Matrix适合在有限的空间中存储少量数据,如标签、包装盒等。与QR Code相比,Data Matrix通常需要更高分辨率的扫描仪或摄像头才能读取。
QR Code适合存储大量数据,并具备容错性;而Data Matrix适合存储少量数据,具备高密度存储能力。如果需要存储较少的数据,Data Matrix可能更适合;如果需要存储大量的数据,QR Code可能更合适。在实际应用中,Data Matrix码常用于内部产品识别和防伪应用,而QR码已成为大多数面向消费者应用的标准格式。
二、目标效果
组件可配置属性:
value文本 DM码文本信息;
margin边距 DM码边距;
foreground前景色 DM码方格颜色;
background背景色 DM码底层背景色;
三、 实现步骤
实现主要涉及两个文件,界面文件Dmcode.vue和方法文件datamatrix.js,后文会贴出全部代码。
1、定义页面挂载对象dmcode
<template><div class="print-dmcode" ref="dmcode"><div class="dmcode-element" v-html="dmContent"></div></div>
</template>
2、定义用户可配置属性(从上层接收)
props: {value: {type: String,default: 'hello world',},margin: {type: Number,default: 0,},background: {type: String,default: '#FFFFFF',},foreground: {type: String,default: '#000000',}
3、编写初始化各配置项方法
mounted() {this.renderCode()
}
相关方法:
methods: {renderCode() {if (!this.container) {this.container = this.$refs['dmcode'].querySelector('.dmcode-element')}try {if(this.container){let value = this.$parse(this.value)// 空字符串CODE128报错,阻塞模板渲染,增加判断if (value) {const options = {msg : this.value // msg,必填,dim : this.size.h // height,高度,rct : 0 //是否为矩形,0否 1是,pad : this.margin // padding,默认值为2px,设置0表示无填充,pal : [this.foreground, this.background] // [前景色, 背景色],vrb : 0 // svg node is optimized to be compact and default value is 0, set this parameter to 1 in case you need more verbose output.}const svgNode = DATAMatrix(options); this.dmContent = svgNode.outerHTML}}} catch (e) {if (typeof e === 'string') {this.$message.error(e)} else {this.$message.error(e && e.message)}}}
},
核心方法DATAMatrix()下文会讲
4、引入原生js方法文件datamatrix.js
import DATAMatrix from '../../../../core/utils/datamatrix '
具体文件位置根据自己实际路径为准。下面为DATAMatrix.js文件全部代码,开箱即用,直接复制即可。
/*** DM二维码生成方法* Created by guohuijie5 on 2024/3/18. */
export function DATAMatrix( Q ) {varM = [],xx = 0,yy = 0,bit = function( x, y ) {M[ y ] = M[ y ] || [],M[ y ][ x ] = 1;},toAscii = function( t ) {varr = [],l = t.length;for( var i = 0; i < l; i++ ) {varc = t.charCodeAt( i ),c1 = ( i + 1 < l ) ? t.charCodeAt( i + 1 ) : 0;if( c > 47 && c < 58 && c1 > 47 && c1 < 58 ) { /* 2 digits */r.push( ( c - 48 ) * 10 + c1 + 82 ), /* - 48 + 130 = 82 */i++;} else if( c > 127 ) { /* extended char */r.push( 235 ),r.push( ( c - 127 ) & 255 );} else r.push( c + 1 ); /* char */}return r;},toBase = function( t ) {varr = [ 231 ], /* switch to Base 256 */l = t.length;if( 250 < l ) {r.push( 37 + ( l / 250 | 0 ) & 255 ); /* length high byte (in 255 state algo) */}r.push( l % 250 + 149 * ( r.length + 1 ) % 255 + 1 & 255 ); /* length low byte (in 255 state algo) */for( var i = 0; i < l; i++ ) {r.push( t.charCodeAt( i ) + 149 * ( r.length + 1 ) % 255 + 1 & 255 ); /* data in 255 state algo */}return r;},toEdifact = function( t ) {varn = t.length,l = ( n + 1 ) & -4, cw = 0, ch,r = ( l > 0 ) ? [ 240 ] : []; /* switch to Edifact */for( var i = 0; i < l; i++ ) {if( i < l - 1 ) {/* encode char */ch = t.charCodeAt( i );if( ch < 32
相关文章:

原生JS如何实现可配置DM码
原生JS如何实现可配置DM码 一、 DM码简介 1、 Data Matrix码 Data Matrix码是一种二维条形码,简称DM码,由美国公司International Data Matrix, Inc.(I.D. Matrix)在1994年发明,Data Matrix码中的行数和列数随二维码中存储的信息量而增加,信息限值是2335个字母数字字符…...

【Python】Python开发面试题库:综合考察面试者能力
文章目录 Python开发面试题库:综合考察面试者能力1. 基础语法与数据类型问题1:变量与数据类型问题2:列表与字典操作问题3:字符串操作问题4:元组解包问题5:集合操作问题6:基本运算问题7ÿ…...

大语言模型的sft
https://zhuanlan.zhihu.com/p/692892489https://zhuanlan.zhihu.com/p/692892489https://zhuanlan.zhihu.com/p/679450872https://zhuanlan.zhihu.com/p/6794508721.常...

Astar路径规划算法复现-python实现
# -*- coding: utf-8 -*- """ Created on Fri May 24 09:04:23 2024"""import os import sys import math import heapq import matplotlib.pyplot as plt import time 传统A*算法 class Astar:AStar set the cost heuristics as the priorityA…...

低-零功率技术在军事中的应用
“低-零功率”概念最先由美国国防部提出,主要是针对诸如俄罗斯等大国的远程传感器,帮助美军破除“灰色地带挑衅”的威胁。由于“灰色地带”冲突仅依托小规模军事力量,其强度维持在不足以引发美国及其盟国进行直接干预的程度,因此&…...

【培训】企业档案管理专题(私货)
导读:通过该专题培训,可以系统了解企业档案管理是什么、为什么、怎么做。尤其是对档案的价值认知,如何构建与新质生产力发展相适应的企业档案工作体系将有力支撑企业新质生产力的发展,为企业高质量发展贡献档案力量,提…...

某国资集团数据治理落地,点燃高质量发展“数字引擎”
某国有资产经营控股集团为快速提升集团的内控管理能力和业务经营能力,以数字化促进企业转型的信息化建设势在必行。集团携手亿信华辰开启数据治理项目,在数据方面成功解决“哪里来、怎么盘、怎么管、怎么用”的问题,不断推动企业数字化转型…...

2024.06.12【读书笔记】丨生物信息学与功能基因组学(第十四章 细菌和古细菌基因组 第二部分)【AI测试版】
读书笔记:《生物信息学与功能基因组学》第十四章 - 第二部分 摘要 第二部分深入讨论了基于不同标准的细菌和古细菌的分类方法,包括形态学、基因组大小和排列、生活方式以及与人类疾病的关系。此外,还探讨了基于核糖体RNA序列的分类方法&…...

企业数据API接口大全
一、工商信息 (1)精确获取企业唯一标识 根据企业名称、注册号或统一社会信用代码,获取企业唯一标识 (2)企业模糊查询 关键字名称模糊搜索匹配企业 (3)企业详情 根据企业唯一标识、企业名称…...

【HTML】格式化文本 pre 标签
文章目录 <pre> 元素中的文本以等宽字体显示,文本保留空格和换行符。 <pre> 元素支持 HTML 中的全局属性和事件属性。 示例: <pre> pre 元素中的文本 以等宽字体显示, 并且同时保留 空格 和 换行符。 </pre&…...

力扣每日一题(2024-06-13)2813. 子序列最大优雅度
基于官方题解,进行补充说明 给你一个长度为 n 的二维整数数组 items 和一个整数 k 。 items[i] [profiti, categoryi],其中 profiti 和 categoryi 分别表示第 i 个项目的利润和类别。 现定义 items 的 子序列 的 优雅度 可以用 total_profit distinct_…...

MySQL -- 优化
1. 查询优化 使用索引 示例:有一个包含数百万用户的表,名为 users,常见的查询是通过 email 字段查找用户。 CREATE INDEX idx_email ON users(email);通过创建索引 idx_email,SELECT * FROM users WHERE email exampleexample…...

学会python——密码校验(python实例三)
目录 1、认识Python 2、环境与工具 2.1 python环境 2.2 pycharm编译 3、纠正密码输入的格式问题 3.1 代码构思 3.2 代码示例 3.3 运行结果 4、总结 1、认识Python Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。 Python 的设计具有很强的可…...

【Python】中的X[:,0]、X[0,:]、X[:,:,0]、X[:,:,1]、X[:,m:n]、X[:,:,m:n]和X[: : -1]
Python中 x[m,n]是通过numpy库引用数组或矩阵中的某一段数据集的一种写法,m代表第m维,n代表m维中取第几段特征数据。 通常用法: x[:,n]或者x[n,:] X[:,0]表示对一个二维数组,取该二维数组第一维中的所有数据,第二维中取第0个数据。 X[0,:]使用类比前者。 举例说明: x[:,0…...

【Java基础】OkHttp 超时设置详解
💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

巴西:海外媒体投放,大舍传媒实现企业与巴西媒体间的交流
引言 随着全球化的进程,海外市场的开拓对于企业的发展至关重要。巴西作为南美洲最大的经济体和人口大国,具有巨大的商机。在与巴西媒体的交流中,大舍传媒的投放成为了一种高效的宣传和合作途径。 巴西媒体的多样性 巴西媒体以其丰富多样的…...

MT7981B+MT7976C+MT7531A RF定频测试方法
1、从下面网址下载QA软件包,然后在WIN系统下安装QA环境。 https://download.csdn.net/download/zhouwu_linux/89428691?spm1001.2014.3001.5501 在WINDOWS 7系统下先安装WinPcap_4_1_3.exe。 2、搭建硬件环境,电脑先连接仪器,主板网络与电…...

支持微信支付宝账单,极空间Docker部署一个开箱即用的私人账本『cashbook』
支持微信支付宝账单,Docker部署一个开箱即用的私人账本『cashbook』 哈喽小伙伴好,我是Stark-C~ 不知道屏幕前的各位富哥富姐们有没有请一个专业的私人财务助理管理自己的巨额资产,我不是给大家炫耀,我在月薪300的时候就已经有了…...

异常检测方法
1 异常检测方法适用范围 什么时候我们需要异常点检测算法呢?常用的有三种情况。 1.做数据预处理的时候需要对异常的数据做过滤,防止对归一化等处理的结果。2.对没有标记输出的特征数据做筛选,找出异常的数据。3.对有标记输出的特征数据做二…...

在网站建设时,如何选择适合自己的网站模版
可以根据以下几个地方选择适合的网站模板 1.公司的核心业务 根据公司的业务内容来确定网站展示的内容之一,不同的业务内容可以有不同的展示方式,以此来确定网站的展示风格之一,公司肯定是要有明确的业务内容,并且能够在网站…...

rabbitmq单机安装及性能测试
RabbitMQ单机安装及性能测试 本文使用CentOS7.9安装RabbitMQ单机环境,并进行性能测试。 1. 安装RabbitMQ RabbitMQ依赖Erlang,版本配套关系参考官网:https://www.rabbitmq.com/docs/which-erlang。 本文安装RabbitMQ3.8.21,Erlang版本要求…...

字节流和字符流的区别
字节流和字符流的区别 字节流 **数据单位:**Byte为单位进行数据传输和处理。 **应用场景:**适用于所有类型的文件,包括视频、视频、音频等二进制文件,以及文本文件。 比如InputStrem和子类(FileInputStream&#x…...

【仿真建模-anylogic】EventRate原理解析
Author:赵志乾 Date:2024-06-13 Declaration:All Right Reserved!!! 1. 类图 2. 原理解析 EventOriginator是Anylogic中各类事件的父类,对外暴露的接口主要有: 函数功能boolean isActive()判定…...

Linux安装Qt5.14.2
下载 qt 5.14.2下载网址 下载qt-opensource-linux-x64-5.14.2.run Linux系统下载.run文件(runfile文件),windows系统下载.exe文件,mac系统下载.dmg文件。 md5sums.txt中是各个文件对应的MD5校验码。 验证MD5校验码 md5sum是li…...

Linux so文件无法找到及某条命令找不到的解决办法
前言 在一些定制软件中可能会自带so文件。或者自带一些二进制命令。 这时会如果运行某个程序会发生 **.so 文件无法找到的错误。 以及 * 某条命令无法找到的错误。 比如像是下面这样 解决办法: so文件无法找到 通过往 LD_LIBRARY_PATH 变量中追加路径来告诉程序…...

工业交换机的供电功率配置
在工业领域中,交换机作为网络设备中的重要组成部分,其供电功率配置必不可少。工业交换机的供电功率配置不仅关系到设备的稳定运行,还直接影响到整个工业生产系统的效率和安全性。因此,在选择工业交换机时,必须对供电功…...

实现一个vue js小算法 选择不同的时间段 不交叉
以上图片选择了时间段 现在需要判断 当前选择的时间段 不能够是 有交叉的所以现在需要循环判断 //判断时间段是否重叠交叉 export function areIntervalsNonOverlapping(intervals:any) {// 辅助函数:将时间字符串转换为从当天午夜开始计算的分钟数function conver…...

GStreamer安装——iOS
安装iOS开发 支持从iOS6开始的所有版本 先决条件 iOS开发需要下载Xcode和iOSSDK。Xcode 可以在App Store或 这里 iOSSDK,如果它还没有包含在您的Xcode版本中, 可以从下载选项卡下的Xcode首选项菜单下载。 最低要求iOS版本为6.0。的最低要求版本 Xcode…...

【云计算】Docker部署Nextcloud网盘并实现随地公网远程访问
配置文件 切换root权限,新建一个nextcloud的文件夹,进入该目录,创建docker-compose.yml [cpslocalhost ~]$ su root Password: 666666 [rootlocalhost cps]# ls Desktop Documents Downloads Music Pictures Public Templates Vide…...

贪心+构造,CF1153 C. Serval and Parenthesis Sequence
一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 Problem - 1153C - Codeforces 二、解题报告 1、思路分析 对于括号匹配问题我们经典做法是左括号当成1,右括号当成-1 那么只要任意前缀非负且最终总和为0那么该括号序列就是合法 对于本题&…...