vue3+ts+vue-qr 使用canvas生成彩色实点二维码

先上一波效果图

背景

最近看到很多好看的二维码，例如这样的创意二维码，觉得非常有意思，但是经过一番研究，以我目前的实力还做不出来这样的效果hhhh，那我就退而求其次，做个彩色的吧！

安装vue-qr

这里就不介绍vue-qr的属性了，给个传送门： 官网

npm install vue-qr --save
或
yarn add vue-qr --save
或
pnpm add vue-qr --save

如果你使用的也是ts本版，那还需要安装

npm i --save-dev @types/vue-qr

使用

<template>
  <!-- 需要展示二维码就不用隐藏 -->
  <vue-qr v-show="isCode" ref="qrcode" :text="qrCodeValue" logo-src="" :size="500" colorDark="#000000"></vue-qr>
  <canvas ref='canvas' id="canvas" :width="width" :height="height"></canvas>
  <input v-model="qrCodeValue" placeholder="请输入二维码内容"></input>
  <button @click="createCode">生成</button>
</template>

ts部分

注意：注意vue2、vue3 导入方式有点差异！！！！

// vue2.x 
import VueQr from 'vue-qr'
// vue3.x 
import vueQr from 'vue-qr/src/packages/vue-qr.vue'

我也是刚学vue3+ts，很多地方写的不是很到位，有什么问题还请帮忙指正。

<script lang="ts" setup>
import vueQr from 'vue-qr/src/packages/vue-qr.vue'; // vue3导入方式
import { ref, reactive } from 'vue'

const qrcode = ref<typeof vueQr>(); // 实例
let qrCodeValue = ref(''); //二维码内容
let isCode = ref(false)
let width = ref(220);
let height = ref(220);
let imgD: any = []; //预留给 像素信息数组
let colors = reactive([
  { r: 0, g: 122, b: 255 },
  { r: 247, g: 255, b: 0 },
  { r: 255, g: 85, b: 0 },
  { r: 192, g: 0, b: 255 },
  { r: 0, g: 255, b: 210 },
  { r: 0, g: 255, b: 31 }]); //染色数组
const canvas = ref();

/**
 * @params imageData 输入像素
 * @params x 开始替换的x坐标
 * @params y 开始替换的y坐标
 * @params sourceColor 需要替换的颜色的rgb值，以对象形式传入
 * @aprams w 替换区域的宽
 * @params h 替换区域的高
 * @params colors[ranNum] 需要替换成的颜色
 */
function replaceColor(imageData: any, x: any, y: any, sourceColor: any, w: any, h: any) {
  var x = x || 0,
    y = y || 0,
    w = x + w || imageData.width,
    h = y + h || imageData.height;
  if (x < 0 || y < 0 || w > imageData.width || h > imageData.height) {
    throw new Error("error params!");
  }
  for (var j = y; j < h; j+=10) {
    for (var i = x; i < w; i+=10) {
      let ranNum: number = Math.floor(Math.random() * colors.length);
      for (var gridJ = 0; gridJ < 10; gridJ++) {
        for (var gridI = 0; gridI < 10; gridI++) {
          var index = (j + gridJ) * imageData.width + (i + gridI),
            r = imageData.data[4 * index],
            g = imageData.data[4 * index + 1],
            b = imageData.data[4 * index + 2];
          if (r == sourceColor.r && g == sourceColor.g && b == sourceColor.b) {

            if (colors[ranNum]) { // 需要替换成的颜色
              imageData.data[4 * index] = colors[ranNum].r;
              imageData.data[4 * index + 1] = colors[ranNum].g;
              imageData.data[4 * index + 2] = colors[ranNum].b;
              imageData.data[4 * index + 3] = 255;
            } else {
              imageData.data[4 * index + 3] = 0;
            }
          }
        }
      }
    }
  }
  return imageData;
}

// 生成code
function createCode() {
  if (qrCodeValue.value === '') return ElMessage({
    message: '请先填写内容.',
    type: 'warning',
  })
  // canvas 部分
  const ctx = canvas.value.getContext('2d');
  let img = new Image();
  img.src = qrcode.value.imgUrl; //这里的path就是图片的地址
  img.onload = function () {
    ctx.drawImage(img, 0, 0, width.value, height.value);
    imgD.value = ctx.getImageData(0, 0, width.value, height.value);
    console.log(imgD.value);
    imgD.value = replaceColor(imgD.value, 0, 0, { r: 0, g: 0, b: 0 }, width.value, height.value)
    ctx.putImageData(imgD.value, 0, 0);
  }
}
</script>

效果图

注：这里的彩色二维码只是实现彩色，因为颜色的问题不符合QR码的要求，会导致二维码识别不了。因为时间不多，就没有往下研究，主要是想练习一下像素点的操作。

注: 经典的二维码在白色的背景上加入黑色方块，一定要使用浅色背景和深色前景，交换颜色不是所有的设备都可以识别。

颜色使用须知如下：

1、条纹使用深色，空白位用浅色。

2、条纹使用冷色，例如黑色、蓝色、绿色、靛蓝色。

3、空白位使用暖色，例如白色、红色、橙色、黄色。

4、红色只能使用于空白位置，不能用于条纹。

5、如要印在透明包装上，建议加上底色。

6、避免使用反光物料，例如金色、银色、铝质物料。

7、条纹使用实色。

8、必须确实有足够的油墨密度，以防有空隙。

9、不应倚靠产品的内容提供颜色反差。

扩展资料

1、颜色

通常我们所看到的以及大多数软件生成的二维码都是黑色的，但事实上彩色的二维码生成技术也并不复杂，并且备受年轻人的喜爱，已有一些网站开始提供彩色二维码在线免费生成服务了。基于二维码的纠错功能，即使二维码部分被覆盖或丢失，扫描设备依然能够识别出其记录的完整信息，当前已有不少“个性二维码”的生成工具，把一些个性图案与二维码进行合成，得到个性化并能被扫描设备识别的二维码，这种“个性二维码”也开始流行起来。

2、特点

（1）高密度编码，信息容量大：可容纳多达1850个大写字母或2710个数字或1108个字节，或500多个汉字，比普通条码信息容量约高几十倍。

（2）编码范围广：该条码可以把图片、声音、文字、签字、指纹等可以数字化的信息进行编码，用条码表示出来；可以表示多种语言文字；可表示图像数据。

（3）容错能力强，具有纠错功能：这使得二维条码因穿孔、污损等引起局部损坏时，照样可以正确得到识读，损毁面积达30%仍可恢复信息。

（4）译码可靠性高：它比普通条码译码错误率百万分之二要低得多，误码率不超过千万分之一。

（5）可引入加密措施：保密性、防伪性好。

（6）成本低，易制作，持久耐用。

（7）条码符号形状、尺寸大小比例可变。

（8）二维条码可以使用激光或CCD阅读器识读。

二维码不起作用的原因主要以下有5个：

（1）质量差（图案图像清晰）

（2）反转颜色（经典的二维码在白色的背景上加入黑色方块，一定要使用浅色背景和深色前景，交换颜色不是所有的设备都可以识别）

（3）小尺寸（二维码的大小= 距离/10 或 2 x 2英寸）

（4）对比度差（即使使用对比色，前景也要比背景暗40%以上）

（5）二维码的内容过多（过多的内容，让像素点更为密集，识别更加困难）