原生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