使用vue3 + vue |
您所在的位置：网站首页 › 生存文字 › 使用vue3 + vue |
使用vue3 + vue
|
目录 vue中生成二维码 1. 安装 vue - qr 2.使用 3.样例展示 4.配置参数 vue3中vue-qr生成二维码 1. 安装 vue - qr npm install vue-qr --sav 2.使用 import { ref } from 'vue'; import vueQr from 'vue-qr/src/packages/vue-qr.vue' 引入vue-qr组件 const codeText=ref(); //----to do 拿到生成二维码的数据后赋值给 codeText 即可,此处就省略了 //模版中使用到这里其实我们已经成功生成二维码了 text 生成二维码的数据 size 二维码的尺寸 colorDark colorLight 设置二维码的颜色 logoSrc 中心logo。 还有一个回调函数callback。 text是必要参数，其他都可不要。 :callback="getImgInfo" 为二维码制作完成后的回调函数。如果有额外的需求，可以在回调函数里操作。 下面是，生成二维码后，在二维码上追加文字。 getImgInfo(qrUrl) { const img = new Image(); img.src = qrUrl; img.onload = () => { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const text = '仅限****充值' canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); // 设置轮廓颜色和宽度 ctx.strokeStyle = '#994AE7'; ctx.lineWidth = 3; // 绘制文字轮廓 ctx.strokeText(text, canvas.width / 2 - ctx.measureText(text).width / 2, canvas.height / 1.6); ctx.font = 'bold 10px'; // 设置字体大小和类型 ctx.fillStyle = 'white'; // 设置字体颜色 ctx.fillText(text, canvas.width / 2 - ctx.measureText(text).width / 2, canvas.height / 1.6); // 在图片中心添加文字 document.getElementById('payQR').src = canvas.toDataURL('image/png'); }; }原理是拿到生成的二维码后通过 canvas 对图片进行加工， 3.样例展示
通过回调加上自定义文字的效果：
注意：logomargin 属性添加logo外边距后 二维码 很可能无法识别，谨慎使用！ |
【本文地址】