原生JS如何實(shí)現(xiàn)可配置DM碼

一、 DM碼簡(jiǎn)介

1、 Data Matrix碼

Data Matrix碼是一種二維條形碼，簡(jiǎn)稱DM碼，由美國(guó)公司International Data Matrix, Inc.（I.D. Matrix）在1994年發(fā)明，Data Matrix碼中的行數(shù)和列數(shù)隨二維碼中存儲(chǔ)的信息量而增加，信息限值是2335個(gè)字母數(shù)字字符。
1）Data Matrix碼的外觀
Data Matrix碼通常是方形，有時(shí)也為矩形，由按網(wǎng)格或“矩陣”排列的多個(gè)明暗方形點(diǎn)或“單元格”組成，由碼一側(cè)的L形圖案定義，并形成兩條實(shí)線相鄰邊界。這種“尋像圖形”可幫助相機(jī)掃描儀定位二維碼。

2）如何掃描Data Matrix碼
可以使用Data Matrix碼掃描儀或全向相機(jī)掃描儀從任何角度掃描Data Matrix碼。一些智能手機(jī)攝像頭能對(duì)Data Matrix碼進(jìn)行掃描，但許多智能手機(jī)沒有內(nèi)置功能，需要第三方應(yīng)用程序來讀取信息。

2、QR碼

提到了DM碼就不說一下QR碼，二者同屬于二維碼。QR碼也能從任何角度讀取。由日本的電裝株式會(huì)社（Denso Corporation）于1994年發(fā)明，最多可存儲(chǔ)4296個(gè)字母數(shù)字字符，具體取決于其中包含的行數(shù)和列數(shù)。

1）QR碼的外觀
QR碼是由在對(duì)比背景上按網(wǎng)格排列的深色或淺色方格組成。
為了幫助掃描儀識(shí)別二維碼，QR碼在碼左上角、右上角和左下角的三個(gè)相同方形結(jié)構(gòu)中包含“尋像圖形”。

2）如何掃描QR碼？
與Data Matrix碼一樣，QR碼可以使用專門QR碼掃描儀或相機(jī)掃描儀從任何方向進(jìn)行掃描。近年來，一些手機(jī)制造商已開始將QR碼讀取加入標(biāo)準(zhǔn)相機(jī)功能中。因此，在面向客戶的應(yīng)用中，QR碼比Data Matrix碼略有優(yōu)勢(shì)，因?yàn)橛脩艨梢灾苯邮褂檬謾C(jī)攝像頭掃描二維碼，而無需使用專門的應(yīng)用程序。
3、Data Matrix碼和QR碼有什么區(qū)別？
QR Code采用的是矩陣式編碼，將數(shù)據(jù)按照一定規(guī)則編碼成黑白方塊，即使部分區(qū)域損壞或遮擋也能正確讀取。
Data Matrix采用的是方格式編碼，將數(shù)據(jù)編碼成黑白方格，并且具有高密度的數(shù)據(jù)存儲(chǔ)能力。Data Matrix適合在有限的空間中存儲(chǔ)少量數(shù)據(jù)，如標(biāo)簽、包裝盒等。與QR Code相比，Data Matrix通常需要更高分辨率的掃描儀或攝像頭才能讀取。

QR Code適合存儲(chǔ)大量數(shù)據(jù)，并具備容錯(cuò)性；而Data Matrix適合存儲(chǔ)少量數(shù)據(jù)，具備高密度存儲(chǔ)能力。如果需要存儲(chǔ)較少的數(shù)據(jù)，Data Matrix可能更適合；如果需要存儲(chǔ)大量的數(shù)據(jù)，QR Code可能更合適。在實(shí)際應(yīng)用中，Data Matrix碼常用于內(nèi)部產(chǎn)品識(shí)別和防偽應(yīng)用，而QR碼已成為大多數(shù)面向消費(fèi)者應(yīng)用的標(biāo)準(zhǔn)格式。

二、目標(biāo)效果

組件可配置屬性：
value文本 DM碼文本信息；
margin邊距 DM碼邊距；
foreground前景色 DM碼方格顏色；
background背景色 DM碼底層背景色；

三、 實(shí)現(xiàn)步驟

實(shí)現(xiàn)主要涉及兩個(gè)文件，界面文件Dmcode.vue和方法文件datamatrix.js，后文會(huì)貼出全部代碼。

1、定義頁面掛載對(duì)象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、編寫初始化各配置項(xiàng)方法

mounted() {this.renderCode()
}

相關(guān)方法：

methods: {renderCode() {if (!this.container) {this.container = this.$refs['dmcode'].querySelector('.dmcode-element')}try {if(this.container){let value = this.$parse(this.value)// 空字符串CODE128報(bào)錯(cuò)，阻塞模板渲染，增加判斷if (value) {const options = {msg :  this.value          // msg,必填,dim :   this.size.h       // height,高度,rct :   0                 //是否為矩形，0否 1是,pad :   this.margin        // padding,默認(rèn)值為2px,設(shè)置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（）下文會(huì)講

4、引入原生js方法文件datamatrix.js

import DATAMatrix from '../../../../core/utils/datamatrix '

具體文件位置根據(jù)自己實(shí)際路徑為準(zhǔn)。下面為DATAMatrix.js文件全部代碼，開箱即用，直接復(fù)制即可。

/*** 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