原生JS如何实现可配置DM码

news2024/10/5 23:28:24

原生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()
}

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

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

具体文件位置根据自己实际路径为准。下面为DATAMatrix.js文件全部代码，开箱即用，直接复制即可。

/**
 * DM二维码生成方法
 * Created by guohuijie5 on 2024/3/18. 
 */
export function DATAMatrix( Q ) {
   
   var
    M = []
   ,xx = 0
   ,yy = 0
   ,bit = function( x, y ) {
   
         M[ y ] = M[ y ] || [],
         M[ y ][ x ] = 1;
      }
   ,toAscii = function( t ) {
   
      var
      r = [],
      l = t.length;
      for( var i = 0; i < l; i++ ) {
   
         var
         c = 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 ) {
   
      var
      r = [ 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 ) {
   
      var
      n = 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