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();
};
