Vue2使用html2canvas将HTML生成图片并上传到服务器的方案

npm install html2canvas --save

<template>
  <div id="app">
    <div ref="captureArea" class="poster-container">
      <h2>这是要生成的图片内容</h2>
      <img src="https://example.com/logo.png" crossorigin="anonymous" />
      <p>生成时间：{{ new Date().toLocaleString() }}</p>
    </div>
    <button @click="handleUpload">生成并上传</button>
  </div>
</template>

import html2canvas from 'html2canvas';
import axios from 'axios';
export default {
  methods: {
    async handleUpload() {
      // 1. 获取 DOM 元素
      const element = this.$refs.captureArea;
      try {
        // 2. 生成 Canvas
        const canvas = await html2canvas(element, {
          useCORS: true,      // 解决图片跨域问题
          scale: 2,           // 设置缩放比例，提高图片清晰度
          backgroundColor: '#ffffff' // 确保背景不是透明的（如果需要）
        });
        // 3. 将 Canvas 转换为 Blob 对象
        canvas.toBlob(async (blob) => {
          if (!blob) {
            this.$message.error('生成图片失败');
            return;
          }
          // 4. 封装成 FormData
          const formData = new FormData();
          // 第三个参数指定文件名，确保后缀为 .png
          formData.append('file', blob, `screenshot_${Date.now()}.png`);
          // 如果需要传递其他参数（如用户 ID、类型等）
          formData.append('userId', '12345');
          // 5. 调用接口上传服务器
          this.submitToServer(formData);
        }, 'image/png');
      } catch (error) {
        console.error('截图失败:', error);
      }
    },
    async submitToServer(formData) {
      try {
        const res = await axios.post('/api/upload/image', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        if (res.data.success) {
          alert('上传成功！服务器路径：' + res.data.url);
        }
      } catch (err) {
        console.error('上传失败:', err);
      }
    }
  }
};