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

qrcode库

文档

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

安装

bash 复制代码
npm i qrcode

使用

errorCorrectionLevel: 'H' // 容错率(H是最高,其它看文档)

width: 200 // 大小

margin: 2 // 边距

javascript 复制代码
import QRCode from 'qrcode'

const testFn = async () => {
    const img= await QRCode.toDataURL('https://www.baidu.com/', { errorCorrectionLevel: 'H', width: 200, margin: 2 })
    console.log(img)
}

canvas绘图

文档

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

使用

html

html 复制代码
<canvas id="myCanvas" width="100" height="100" style="border: 1px solid #ccc"></canvas>

js

javascript 复制代码
const canvas = document.getElementById('myCanvas')

// 设置画布宽高(也可内联样式写标签上)
canvas.width = 200
canvas.height = 200

// 获取 2d 上下文对象
const ctx = canvas.getContext('2d')

// 绘制圆
// 设置圆的属性
const centerX = canvas.width / 2 // 圆心 X 坐标
const centerY = canvas.height / 2 // 圆心 Y 坐标
const radius = 30 // 圆的半径
ctx.beginPath() // 开始路径
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, false) // 绘制圆
ctx.fillStyle = '#f9f9f9' // 填充颜色
ctx.fill() // 填充圆
ctx.closePath() // 关闭路径

// 绘制文本
ctx.font = '10px' // 文本大小
ctx.fillStyle = 'blue' // 颜色
ctx.textAlign = 'center' // 水平对齐
ctx.textBaseline = 'middle' // 垂直对齐
ctx.fillText('绘制文本', canvas.width / 2, canvas.height / 2)

效果

合并图片方法

javascript 复制代码
function mergeImages() {
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')

  // 创建两个图片对象
  const img1 = new Image()
  const img2 = new Image()
  img1.src = 'https://www.test.com/menu.png'
  img2.src = 'https://www.test.com//logo.png'

  // 等待两张图片加载完成
  let imagesLoaded = 0

  img1.onload = img2.onload = function () {
    imagesLoaded++
    if (imagesLoaded === 2) {
      // 当两张图片都加载完成后,绘制到 Canvas 上
      ctx.drawImage(img1, 0, 0) // 绘制第一张图片
      ctx.drawImage(img2, 50, 0) // 绘制第二张图片,x偏移 50 像素

      // 下载合并后的图片
      const link = document.createElement('a')
      link.download = 'merged-image.png'
      link.href = canvas.toDataURL('image/png')
      link.click()
    }
  }
}

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

实现

html

html 复制代码
<canvas id="myCanvas" width="100" height="100" style="border: 1px solid #ccc"></canvas>

js

javascript 复制代码
const onMounted = async () => {
  // await nextTick() // 使用vue加上
  const canvas = document.getElementById('myCanvas')
  canvas.width = 200
  canvas.height = 200
  const ctx = canvas.getContext('2d')
  
  // 生成二维码并绘制到canvas
  const img1 = new Image()
  img1.src = await QRCode.toDataURL('https://www.baidu.com/', { errorCorrectionLevel: 'H', width: 200, margin: 2 })
  await new Promise((resolve, reject) => {
    img1.onload = () => {
      resolve(ctx.drawImage(img1, 0, 0))
    }
  })

  // 绘制圆
  // 设置圆的属性
  const centerX = canvas.width / 2 // 圆心 X 坐标
  const centerY = canvas.height / 2 // 圆心 Y 坐标
  const radius = 30 // 圆的半径
  ctx.beginPath() // 开始路径
  ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, false) // 绘制圆
  ctx.fillStyle = '#f9f9f9' // 填充颜色
  ctx.fill() // 填充圆
  ctx.closePath() // 关闭路径

  // 绘制文本
  ctx.font = '10px'
  ctx.fillStyle = 'blue'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  ctx.fillText('绘制文本', canvas.width / 2, canvas.height / 2)
}

效果

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

相关推荐
小赖同学吖几秒前
Java 中的继承与多态:面向对象编程的核心特性
java·开发语言
萧鼎7 分钟前
Python WebSockets 库详解:从基础到实战
开发语言·python
长潇若雪10 分钟前
《STL 六大组件之容器篇:简单了解 list》
开发语言·c++·经验分享·list·类和对象
MaCa .BaKa24 分钟前
25-智慧旅游系统(协同算法)三端
java·javascript·vue.js·spring boot·tomcat·maven·旅游
MiyueFE28 分钟前
bpmn-js 源码篇9:Moddle - 对象格式的标准化定义库
前端·javascript
西元.30 分钟前
线程等待与唤醒的几种方法与注意事项
java·开发语言
独好紫罗兰38 分钟前
洛谷题单2-P5717 【深基3.习8】三角形分类-python-流程图重构
开发语言·python·算法
落榜程序员39 分钟前
Java基础-25-继承-方法重写-子类构造器的特点-构造器this的调用
java·开发语言
Debug 熊猫41 分钟前
【Java基础】10章、单例模式、final关键字的使用技巧和使用细节、单例模式-懒汉式、单例模式-饿汉式【3】
java·javascript·后端·单例模式
forestsea1 小时前
Java 应用程序CPU 100%问题排查优化实战
java·开发语言