当前位置：首页 > VUE

vue实现生成海报图片

2026-01-22 12:50:06VUE

使用html2canvas生成海报

安装html2canvas库

npm install html2canvas --save

在Vue组件中引入并使用

import html2canvas from 'html2canvas';

methods: {
  generatePoster() {
    const element = document.getElementById('poster-container');
    html2canvas(element).then(canvas => {
      const imgUrl = canvas.toDataURL('image/png');
      this.downloadImage(imgUrl, 'poster.png');
    });
  },
  downloadImage(url, name) {
    const link = document.createElement('a');
    link.download = name;
    link.href = url;
    link.click();
  }
}

使用canvas原生API绘制

创建canvas绘制方法

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);

    // 绘制文字
    ctx.fillStyle = '#333333';
    ctx.font = '30px Arial';
    ctx.fillText('海报标题', 100, 100);

    // 绘制图片
    const img = new Image();
    img.src = 'path/to/image';
    img.onload = () => {
      ctx.drawImage(img, 100, 150, 200, 200);
      const posterUrl = canvas.toDataURL('image/png');
      this.downloadImage(posterUrl, 'canvas-poster.png');
    };
  }
}

使用第三方插件vue-canvas-poster

安装插件

npm install vue-canvas-poster --save

组件中使用

import VueCanvasPoster from 'vue-canvas-poster';

export default {
  components: {
    VueCanvasPoster
  },
  methods: {
    generate() {
      this.$refs.canvasPoster.generate();
    }
  }
}

模板配置

<vue-canvas-poster ref="canvasPoster" :width="750" :height="1334">
  <poster-background src="background.jpg"></poster-background>
  <poster-text content="标题文字" :left="100" :top="100"></poster-text>
  <poster-image src="product.png" :left="200" :top="200"></poster-image>
  <poster-qrcode content="https://example.com" :left="300" :top="300"></poster-qrcode>
</vue-canvas-poster>

处理跨域图片问题

配置代理解决跨域

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://image-domain.com',
        changeOrigin: true
      }
    }
  }
}

使用CORS兼容方案

methods: {
  loadCrossOriginImage(url) {
    return new Promise((resolve) => {
      const img = new Image();
      img.crossOrigin = 'Anonymous';
      img.src = url + '?timestamp=' + new Date().getTime();
      img.onload = () => resolve(img);
    });
  }
}

优化生成性能

使用离屏canvas预渲染

const offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = 750;
offscreenCanvas.height = 1334;
const offscreenCtx = offscreenCanvas.getContext('2d');

// 预渲染静态内容
offscreenCtx.fillStyle = '#ffffff';
offscreenCtx.fillRect(0, 0, 750, 1334);

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

    // 复制预渲染内容
    ctx.drawImage(offscreenCanvas, 0, 0);

    // 只渲染动态内容
    ctx.fillText(this.dynamicText, 100, 100);

    return canvas.toDataURL('image/png');
  }
}

处理高清屏适配

适配retina屏幕

methods: {
  createHiDPICanvas(width, height) {
    const ratio = window.devicePixelRatio || 1;
    const canvas = document.createElement('canvas');
    canvas.width = width * ratio;
    canvas.height = height * ratio;
    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';
    canvas.getContext('2d').scale(ratio, ratio);
    return canvas;
  }
}

vue实现生成海报图片