vue3 点击图标从相册选择二维码图片，并使用jsqr解析二维码（含crypto-js加密解密过程）

vue3 点击图标从相册选择二维码图片，并使用jsqr解析二维码（含crypto-js加密解密过程）

1.安装 jsqr 和 crypto-js

npm install -d jsqr
npm install crypto-js

2.在util目录下新建encryptionHelper.js文件，写加密解密方法。

// encryptionHelper.js 内容，可直接复制。
const CryptoJS = require("crypto-js");

// 密钥和初始化向量应该是随机生成的，这里为了示例简单使用固定的字符串
const ss = CryptoJS.enc.Utf8.parse("sdgdfjytyjkueesh"); // 密钥必须为：8/16/32位
const sss = CryptoJS.enc.Utf8.parse("fhgtdytestgrjrtd"); // 初始化向量
//加密
export function encryptUtil(message) {
  let encrypted = CryptoJS.AES.encrypt(JSON.stringify(message), ss, {
    iv: sss,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7,
  });
  let data = encrypted.toString();
  return data;
}
//解密
export function decryptUtil(encrypt) {
  var decrypt = CryptoJS.AES.decrypt(encrypt, ss, {
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7,
    iv: sss,
  }).toString(CryptoJS.enc.Utf8); //【注】：加密的时候必须转成字符串 使用toString。 解密的时候 必须使用utf8的格式
  return decrypt; // 将解密后的数据转换为 UTF-8 字符串
}

3.在页面引入 jsqr 和 encryptionHelper.js 文件

import { encryptUtil,decryptUtil } from "../util/encryptionHelper.js";//加密解密工具
import jsQR from "jsqr";

4.项目中使用

<template>
<!-- 相册选择区域 -->
        <div>
          <input
            type="file"
            accept="image/*"
            @change="onFileSelected"
            ref="fileInput"
            style="display: none"
          />
          <img
            src="@/assets/scan.png"
            style="
              position: absolute;
              width: 50px;
              height: 50px;
              right: 10px;
              bottom: -50px;
              z-index: 10;
            "
            alt=""
            @click="selectFromFile"
          />
        </div>
</template>
......
import { encryptUtil,decryptUtil } from "../util/encryptionHelper.js";//加密解密工具
import jsQR from "jsqr";
// ！！！！！注：encryptUtil为加密方法，此处省略
// let encryData = encryptUtil(param);//param为加密前的数据，encryData 为加密过后的数据

// 识别二维码功能（含解码方法的调用）-----------------------------------------------------------
const fileInput = ref(null);
// 从相册选择图片并解析二维码
const onFileSelected = async (event) => {
  const file = event.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = (e) => {
    const img = new Image();
    img.src = e.target.result;
    img.onload = () => {
      const canvas = document.createElement("canvas");
      const context = canvas.getContext("2d");
      canvas.width = img.width;
      canvas.height = img.height;
      context.drawImage(img, 0, 0);
      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
      const decodedResult = jsQR(imageData.data, imageData.width, imageData.height, {
        inversionAttempts: "dontInvert",
      });
      if (decodedResult) {
        var data = decryptUtil(decodedResult.data);//解密
        console.log(111111111111111,data);
       // var dataa = JSON.parse(data);//按需使用
       // data 是解析出来的数据，是否需要转化格式，自行处理
      } else {
        alert("未检测到二维码");
      }
    };
  };
  reader.readAsDataURL(file);
};
// 触发文件选择对话框
const selectFromFile = () => {
  fileInput.value.click();
};