网站后缀意思,网站怎么做排查修复,腾讯广告卖东西怎么建设网站,python做网站有优势vue3 点击图标从相册选择二维码图片#xff0c;并使用jsqr解析二维码#xff08;含crypto-js加密解密过程#xff09;
1.安装 jsqr 和 crypto-js
npm install -d jsqr
npm install crypto-js2.在util目录下新建encryptionHelper.js文件#xff0c;写加密解密方法。
// e…
vue3 点击图标从相册选择二维码图片并使用jsqr解析二维码含crypto-js加密解密过程
1.安装 jsqr 和 crypto-js
npm install -d jsqr
npm install crypto-js2.在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
!-- 相册选择区域 --divinputtypefileacceptimage/*changeonFileSelectedreffileInputstyledisplay: none/imgsrc/assets/scan.pngstyleposition: absolute;width: 50px;height: 50px;right: 10px;bottom: -50px;z-index: 10;altclickselectFromFile//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();
};
