做网站时已做好了ps怎么倒入,响应式网站视频怎么做,网站域名查询ip地址,如何做中英文网站设计实现在 vue3 中根据 url 生成一个二维码码#xff0c;且可以复制。
注#xff09;复制功能 navigator.clipboard.write 只能在安全的localhost 这种安全网络下使用。https中需要添加安全证书#xff0c;且在域名#xff08;例#xff1a;https://www.baidu.com#xff0…实现在 vue3 中根据 url 生成一个二维码码且可以复制。
注复制功能 navigator.clipboard.write 只能在安全的localhost 这种安全网络下使用。https中需要添加安全证书且在域名例https://www.baidu.com这种下即可。
1、安装
注由于qrcodejs的兼容性问题需要在vue3中引入qrcodejs2-fix才能正常生成二维码。
npm install qrcodejs2-fix
2、在vue文件中导入模块qrcodejs2-fix
import QRCode from qrcodejs2-fix;
3、场景一、生成二维码码、复制生成的二维码图片 template// 点南生成二维码e-button typeprimary clickhandleGenerate点击生成二维码/e-button// 生成的二维码图片div idimgCode/div// 复制二维码e-button typeprimary clickhandleCopyCode复制/e-button
/templatescript setup
// 1、生成二维码id名称, 参数
function handleGenerate(idName, name) {// 采集二维码路径const ip https://crm.waihucc.com;const getIPAddress ${ip}/h5/index.html; const url ${getIPAddress}?companyId80saleId${name};// 获取二维码码 div 上的 idconst qrCodeElement document.getElementById(idName);if (qrCodeElement) {qrCodeElement.innerHTML ;new QRCode(qrCodeElement, {text: url || ,width: 100, // 二维码宽度height: 100, // 二维码高度});}
}// 2、复制生成的二维码id 名称
function handleCopyCode(idName) {// 1、获取图片元素const imgElement document.querySelector(#${idName} img);// 2、创建一个新的Image对象const img new Image();// 3、设置Image对象的src为图片元素的srcimg.src imgElement.src;// 4、监听图片加载完成事件img.onload function () {//1创建 Canvasconst canvas document.createElement(canvas);canvas.width img.width;canvas.height img.height;const ctx canvas.getContext(2d);//2在Canvas上绘制图片ctx.drawImage(img, 0, 0);//3获取 Canvas 内容作为Blobcanvas.toBlob(function (blob) {//4使用Clipboard API 把生成对象URL写入到剪贴板navigator.clipboard.write([new ClipboardItem({ image/png: blob })]).then(() {ElMessage({message: 二维码已复制,type: success,});}).catch(() {console.error(图像复制失败);});});};
}
/script 4、场景二、点复制按钮生成二维码点击复制直接复制生成的二维码图片 template// 复制二维码e-button typeprimary clickgenerateCode复制/e-button// 生成的二维码图片div idimgCode/div
/templatescript setup
// 1、
const generateCode (url, idName) {document.getElementById(idName).innerHTML ;new QRCode(document.getElementById(idName), {text: url || ,});// 获取 Canvas 元素const canvas document.getElementById(idName).querySelector(canvas);// 将 Canvas 转换为 Data URLconst dataURL canvas.toDataURL();// 创建一个 Blob 对象const blob dataURLToBlob(dataURL);// 使用 Clipboard API 复制 Blob 对象到剪贴板navigator.clipboard.write([new ClipboardItem({ image/png: blob })]).then(() {ElMessage({message: 二维码已复制,type: success,});}).catch(() {console.error(图像复制失败);});
};// 2、
const dataURLToBlob (dataURL) {const arr dataURL.split(,);const mime arr[0].match(/:(.*?);/)[1];const bstr atob(arr[1]);let n bstr.length;const u8arr new Uint8Array(n);while (n--) {u8arr[n] bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });
};
/script
