js使用qrcode与canvas生成带logo的二维码

qrcode库

 文档

   https://www.npmjs.com/package/qrcode
   安装

1. npm i qrcode

复制代码

使用

   errorCorrectionLevel: 'H'  // 容错率（H是最高，别的看文档）
  width: 200 // 大小
  margin: 2 // 边距

1. import QRCode from 'qrcode'
3. const testFn = async () => {
4.     const img= await QRCode.toDataURL('https://www.baidu.com/', { errorCorrectionLevel: 'H', width: 200, margin: 2 })
5.     console.log(img)
6. }

复制代码

canvas绘图

文档

   https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
  使用

html

1. <canvas id="myCanvas" width="100" height="100" style="border: 1px solid #ccc"></canvas>

复制代码

js

1. const canvas = document.getElementById('myCanvas')
3. // 设置画布宽高（也可内联样式写标签上）
4. canvas.width = 200
5. canvas.height = 200
7. // 获取 2d 上下文对象
8. const ctx = canvas.getContext('2d')
10. // 绘制圆
11. // 设置圆的属性
12. const centerX = canvas.width / 2 // 圆心 X 坐标
13. const centerY = canvas.height / 2 // 圆心 Y 坐标
14. const radius = 30 // 圆的半径
15. ctx.beginPath() // 开始路径
16. ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, false) // 绘制圆
17. ctx.fillStyle = '#f9f9f9' // 填充颜色
18. ctx.fill() // 填充圆
19. ctx.closePath() // 关闭路径
21. // 绘制文本
22. ctx.font = '10px' // 文本大小
23. ctx.fillStyle = 'blue' // 颜色
24. ctx.textAlign = 'center' // 水平对齐
25. ctx.textBaseline = 'middle' // 垂直对齐
26. ctx.fillText('绘制文本', canvas.width / 2, canvas.height / 2)

复制代码

 结果

合并图片方法

1. function mergeImages() {
2.   const canvas = document.createElement('canvas')
3.   const ctx = canvas.getContext('2d')
5.   // 创建两个图片对象
6.   const img1 = new Image()
7.   const img2 = new Image()
8.   img1.src = 'https://www.test.com/menu.png'
9.   img2.src = 'https://www.test.com//logo.png'
11.   // 等待两张图片加载完成
12.   let imagesLoaded = 0
14.   img1.onload = img2.onload = function () {
15.     imagesLoaded++
16.     if (imagesLoaded === 2) {
17.       // 当两张图片都加载完成后，绘制到 Canvas 上
18.       ctx.drawImage(img1, 0, 0) // 绘制第一张图片
19.       ctx.drawImage(img2, 50, 0) // 绘制第二张图片，x偏移 50 像素
21.       // 下载合并后的图片
22.       const link = document.createElement('a')
23.       link.download = 'merged-image.png'
24.       link.href = canvas.toDataURL('image/png')
25.       link.click()
26.     }
27.   }
28. }

复制代码

结合使用实现二维码带logo

   使用qrcode生成二维码，使用canvas绘制合并到一起
  实现

html

1. <canvas id="myCanvas" width="100" height="100" style="border: 1px solid #ccc"></canvas>

复制代码

js 

1. const onMounted = async () => {
2.   // await nextTick() // 使用vue加上
3.   const canvas = document.getElementById('myCanvas')
4.   canvas.width = 200
5.   canvas.height = 200
6.   const ctx = canvas.getContext('2d')
7.   
8.   // 生成二维码并绘制到canvas
9.   const img1 = new Image()
10.   img1.src = await QRCode.toDataURL('https://www.baidu.com/', { errorCorrectionLevel: 'H', width: 200, margin: 2 })
11.   await new Promise((resolve, reject) => {
12.     img1.onload = () => {
13.       resolve(ctx.drawImage(img1, 0, 0))
14.     }
15.   })
17.   // 绘制圆
18.   // 设置圆的属性
19.   const centerX = canvas.width / 2 // 圆心 X 坐标
20.   const centerY = canvas.height / 2 // 圆心 Y 坐标
21.   const radius = 30 // 圆的半径
22.   ctx.beginPath() // 开始路径
23.   ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, false) // 绘制圆
24.   ctx.fillStyle = '#f9f9f9' // 填充颜色
25.   ctx.fill() // 填充圆
26.   ctx.closePath() // 关闭路径
28.   // 绘制文本
29.   ctx.font = '10px'
30.   ctx.fillStyle = 'blue'
31.   ctx.textAlign = 'center'
32.   ctx.textBaseline = 'middle'
33.   ctx.fillText('绘制文本', canvas.width / 2, canvas.height / 2)
34. }

复制代码

 结果

    如需把文本更换成图片，参考上面 合并图片方法 即可

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。