vue3 qrcode.js带图标

### 在 Vue3 中使用 qrcode.js 生成带图标二维码 为了实现这一功能，可以按照以下方式操作： #### 安装依赖包 安装 `qrcode` 和 `html2canvas` 库来处理二维码的创建以及可能涉及到的图像合成工作。 ```bash npm install qrcode html2canvas ``` #### 创建组件逻辑 在脚本部分导入必要的模块，并定义方法用于生成带有图标的二维码。这里假设有一个输入框接收要编码的数据，还有一个文件上传控件用来获取想要嵌入到二维码中心位置的小图标。 ```javascript <script setup> import QRCode from 'qrcode'; import html2canvas from 'html2canvas'; const generateQRWithLogo = async (dataUrl, logoSrc) => { const canvas = document.createElement('canvas'); try { await QRCode.toCanvas(canvas, dataUrl, { margin: 1, color: { dark : '#000', // foreground color light: '#fff' // background color }, scale: 8 }); let ctx = canvas.getContext('2d'); // Load the logo image and draw it on top of the generated QR code. let img = new Image(); img.src = logoSrc; img.onload = () => { let qrSize = Math.min(ctx.canvas.width, ctx.canvas.height); let size = qrSize * 0.2; // Adjust this value to change the logo's relative size // Calculate position for centering the logo within the QR code area let posX = (ctx.canvas.width / 2) - (size / 2), posY = (ctx.canvas.height / 2) - (size / 2); // Draw a white square behind the logo as padding ctx.fillStyle = "#FFFFFF"; ctx.fillRect(posX, posY, size, size); // Scale down the original logo before drawing onto the canvas ctx.drawImage(img, posX, posY, size, size); // Convert final result back into an image URL that can be displayed or downloaded console.log(canvas.toDataURL()); }; } catch(error){ console.error(`Error generating QR with logo ${error}`); } }; </script> ``` 这段代码展示了如何利用 `qrcode` 来绘制基础的二维码图案，之后加载指定路径下的图片资源作为标志放置于二维码中央区域[^1]。 请注意，在实际应用中应当考虑错误处理机制以应对可能出现的各种异常情况；此外还需要注意跨域资源共享(CORS)政策对于远程URL访问的影响。