vue3二维码和图片合成海报

番茄和鸡蛋的故事

已于 2023-07-01 18:50:32 修改

阅读量696

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签： javascript 前端开发语言

于 2023-07-01 18:02:52 首次发布

本文链接：https://blog.youkuaiyun.com/m0_60218525/article/details/131493278

vue3 专栏收录该内容

1 篇文章

订阅专栏

该代码示例展示了如何在Vue应用中利用HTML5的canvas元素生成一张包含二维码的海报。首先，它加载背景图片，然后绘制二维码，最后添加文字并提供下载海报的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <canvas id="canvas" width="300" height="500"></canvas>
</template>

<script setup>
import { onMounted,ref } from 'vue';
import QRCode from 'qrcode';
import posterImg from '../src/assets/e.jpg'

onMounted(() => {
  generateQRCode()
})

let qrCode = ref('')
async function generateQRCode () {
  const qrUrl = ref('xxx')//这里放生成url的地址

  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d')
    //清空画布
  context.clearRect(0, 0, canvas.width, canvas.height);

  const image = new Image();
  image.src = posterImg;
  image.crossOrigin = 'Anonymous';

  // 等待图片加载完成
  await new Promise((resolve) => {
     image.onload = resolve;
  });

  // 绘制图片
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
  // 生成二维码
  const qrCodeDataUrl = await QRCode.toDataURL(qrUrl.value);

  // 加载二维码图片
  const qrCodeImage = new Image();
  qrCodeImage.src = qrCodeDataUrl;

  // 等待二维码图片加载完成
  await new Promise((resolve) => {
    qrCodeImage.onload = resolve;
  });

  // 绘制二维码图片 x,y,宽,高
  context.drawImage(qrCodeImage, 120, 340, 50, 50);

  //绘制文字
  context.fillStyle = '#fff';
  context.font = '12px Arial';

  //传入显示的文本 x,y
  context.fillText('邀请码', 120, 410);

}
</script>

下载海报

function download (){
   const canvas = document.getElementById('canvas');
   const downloadLink = document.createElement('a');
   downloadLink.href = canvas.toDataURL('image/png');
   downloadLink.download = 'poster.png';
   downloadLink.click();
}