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><inputtype="file"accept="image/*"@change="onFileSelected"ref="fileInput"style="display: none"/><imgsrc="@/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();
};