当前位置：首页 > VUE

vue实现生成海报图片

2026-02-23 03:49:33VUE

使用html2canvas库生成海报图片

在Vue项目中安装html2canvas库

npm install html2canvas --save

创建一个海报模板组件，包含需要转换为图片的DOM元素

<template>
  <div class="poster-container" ref="posterContainer">
    <!-- 海报内容 -->
    <div class="poster-content">
      <h2>活动海报</h2>
      <p>活动时间：2023-12-31</p>
      <img src="background.jpg" alt="背景图">
      <div class="qr-code">
        <!-- 二维码 -->
      </div>
    </div>
    <button @click="generatePoster">生成海报</button>
  </div>
</template>

实现生成海报的方法

import html2canvas from 'html2canvas'

export default {
  methods: {
    async generatePoster() {
      const element = this.$refs.posterContainer
      try {
        const canvas = await html2canvas(element, {
          scale: 2, // 提高分辨率
          logging: false,
          useCORS: true, // 解决跨域图片问题
          allowTaint: true
        })

        // 转换为图片URL
        const imageUrl = canvas.toDataURL('image/png')

        // 下载图片
        this.downloadImage(imageUrl, 'poster.png')
      } catch (error) {
        console.error('生成海报失败:', error)
      }
    },

    downloadImage(url, filename) {
      const link = document.createElement('a')
      link.href = url
      link.download = filename
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}

使用canvas原生API绘制海报

创建Canvas绘制方法

export default {
  methods: {
    drawPoster() {
      const canvas = document.createElement('canvas')
      canvas.width = 750
      canvas.height = 1334
      const ctx = canvas.getContext('2d')

      // 绘制背景
      ctx.fillStyle = '#ffffff'
      ctx.fillRect(0, 0, canvas.width, canvas.height)

      // 绘制图片
      const img = new Image()
      img.crossOrigin = 'Anonymous'
      img.onload = () => {
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height * 0.6)

        // 绘制文字
        ctx.fillStyle = '#333333'
        ctx.font = 'bold 36px Arial'
        ctx.textAlign = 'center'
        ctx.fillText('活动海报', canvas.width/2, 700)

        // 转换为图片并下载
        const dataURL = canvas.toDataURL('image/png')
        this.downloadImage(dataURL, 'custom-poster.png')
      }
      img.src = 'background.jpg'
    }
  }
}

使用第三方Vue海报组件

安装vue-poster插件

npm install vue-poster --save

在组件中使用

<template>
  <vue-poster
    :width="750"
    :height="1334"
    :config="posterConfig"
    @success="onPosterSuccess"
  >
    <template #default>
      <button>生成海报</button>
    </template>
  </vue-poster>
</template>

<script>
import VuePoster from 'vue-poster'

export default {
  components: { VuePoster },
  data() {
    return {
      posterConfig: {
        backgroundColor: '#ffffff',
        elements: [
          {
            type: 'image',
            url: 'background.jpg',
            top: 0,
            left: 0,
            width: 750,
            height: 800
          },
          {
            type: 'text',
            content: '活动海报',
            fontSize: 36,
            color: '#333333',
            top: 820,
            left: 375,
            textAlign: 'center'
          }
        ]
      }
    }
  },
  methods: {
    onPosterSuccess(url) {
      this.downloadImage(url, 'vue-poster.png')
    }
  }
}
</script>