当前位置：首页 > VUE

vue实现图片合成

2026-03-10 11:26:42VUE

Vue 实现图片合成的方案

使用 canvas 绘制合成图片

在 Vue 中可以通过动态创建 canvas 元素实现图片合成。需要先加载所有图片资源，确保图片加载完成后再进行绘制。

<template>
  <div>
    <canvas ref="canvas" width="800" height="600"></canvas>
  </div>
</template>

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

      // 加载图片资源
      const bgImg = await this.loadImage('background.jpg');
      const logoImg = await this.loadImage('logo.png');

      // 绘制背景
      ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height);

      // 绘制logo
      ctx.drawImage(logoImg, 100, 100, 200, 200);

      // 导出合成后的图片
      const result = canvas.toDataURL('image/jpeg');
      return result;
    },

    loadImage(src) {
      return new Promise((resolve) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.src = src;
      });
    }
  },
  mounted() {
    this.compositeImages();
  }
}
</script>

使用 html2canvas 库实现

html2canvas 可以将 DOM 元素转换为 canvas，适合需要将页面元素与图片一起合成的场景。

<template>
  <div ref="container">
    <img src="background.jpg">
    <div class="text-overlay">自定义文字</div>
  </div>
  <button @click="capture">合成图片</button>
</template>

<script>
import html2canvas from 'html2canvas';

export default {
  methods: {
    async capture() {
      const element = this.$refs.container;
      const canvas = await html2canvas(element);

      // 获取图片数据
      const image = canvas.toDataURL('image/png');

      // 下载图片
      const link = document.createElement('a');
      link.download = 'composite-image.png';
      link.href = image;
      link.click();
    }
  }
}
</script>

使用 fabric.js 库实现

fabric.js 提供了更高级的 canvas 操作功能，适合需要复杂图片编辑的场景。

<template>
  <canvas ref="canvas" width="800" height="600"></canvas>
</template>

<script>
import { fabric } from 'fabric';

export default {
  mounted() {
    const canvas = new fabric.Canvas(this.$refs.canvas);

    // 添加背景图片
    fabric.Image.fromURL('background.jpg', (img) => {
      img.set({ width: 800, height: 600 });
      canvas.add(img);

      // 添加文字
      const text = new fabric.Text('合成文字', {
        left: 100,
        top: 100,
        fontSize: 30,
        fill: 'white'
      });
      canvas.add(text);

      // 导出图片
      const dataURL = canvas.toDataURL({
        format: 'jpeg',
        quality: 0.8
      });
      console.log(dataURL);
    });
  }
}
</script>