当前位置：首页 > VUE

vue实现海报

2026-01-07 20:19:47VUE

Vue 实现海报生成方案

使用 html2canvas 库

html2canvas 是一个将 HTML 元素转换为 Canvas 的库，适合将 Vue 组件渲染为海报图片

安装依赖：

npm install html2canvas

基本实现代码：

<template>
  <div>
    <div ref="posterContent">
      <!-- 海报内容 HTML 结构 -->
      <h1>活动海报</h1>
      <p>时间：2023-11-11</p>
      <img :src="qrCodeUrl" alt="二维码">
    </div>
    <button @click="generatePoster">生成海报</button>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';

export default {
  data() {
    return {
      qrCodeUrl: 'https://example.com/qrcode.png'
    }
  },
  methods: {
    async generatePoster() {
      const element = this.$refs.posterContent;
      const canvas = await html2canvas(element, {
        backgroundColor: '#ffffff',
        scale: 2 // 提高分辨率
      });

      const image = canvas.toDataURL('image/png');
      this.downloadImage(image, 'poster.png');
    },
    downloadImage(url, name) {
      const link = document.createElement('a');
      link.download = name;
      link.href = url;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
}
</script>

使用 canvas 直接绘制

对于更复杂的海报需求，可以直接使用 Canvas API 进行绘制

<template>
  <div>
    <canvas ref="posterCanvas" width="750" height="1334"></canvas>
    <button @click="drawPoster">绘制海报</button>
  </div>
</template>

<script>
export default {
  methods: {
    drawPoster() {
      const canvas = this.$refs.posterCanvas;
      const ctx = canvas.getContext('2d');

      // 绘制背景
      ctx.fillStyle = '#F5F5F5';
      ctx.fillRect(0, 0, 750, 1334);

      // 绘制标题
      ctx.font = 'bold 36px sans-serif';
      ctx.fillStyle = '#333';
      ctx.textAlign = 'center';
      ctx.fillText('活动海报', 375, 100);

      // 绘制图片
      const img = new Image();
      img.src = 'https://example.com/poster-bg.jpg';
      img.onload = () => {
        ctx.drawImage(img, 50, 150, 650, 800);

        // 绘制二维码
        const qrImg = new Image();
        qrImg.src = this.qrCodeUrl;
        qrImg.onload = () => {
          ctx.drawImage(qrImg, 550, 1100, 150, 150);
        }
      }
    }
  }
}
</script>