事前準備

依存関係をインストールします

npm install html2canvas --save

対象コンポーネントにライブラリをインポートします

import html2canvas from 'html2canvas'

画像生成対象の要素にrefを指定します

<div ref="thumbnailArea">...</div>

方法1: Blob形式でバックエンドへ送信

methods: {
  generateThumbnail() {
    html2canvas(this.$refs.thumbnailArea, {
      scale: 0.3,
      useCORS: true,
      background: 'white'
    }).then(canvas => {
      const imageData = canvas.toDataURL('image/jpeg');
      const fileData = this.base64ToBlob(imageData);
      const formData = new FormData();
      formData.append('image_file', fileData, `${Date.now()}.jpg`);
      
      this.saveThumbnail(formData).then(response => {
        if (response.code === 200) {
          this.showToast('サムネイル保存成功');
        }
      });
    });
  },
  
  base64ToBlob(base64Data) {
    const parts = base64Data.split(',');
    const contentType = parts[0].match(/:(.*?);/)[1];
    const binaryData = atob(parts[1]);
    const buffer = new Uint8Array(binaryData.length);
    
    for (let i = 0; i < binaryData.length; i++) {
      buffer[i] = binaryData.charCodeAt(i);
    }
    
    return new Blob([buffer], { type: contentType });
  }
}

バックエンド実装例 (Spring Boot)

@PostMapping("/save-thumbnail")
public ResponseEntity<String> saveThumbnail(@RequestParam("image_file") MultipartFile file) {
  try {
    String fileName = file.getOriginalFilename();
    String savePath = "static/thumbnails/" + fileName;
    
    Files.write(Paths.get(savePath), file.getBytes());
    return ResponseEntity.ok("保存完了");
  } catch (IOException e) {
    return ResponseEntity.status(500).body("エラー: " + e.getMessage());
  }
}

方法2: Base64データでデータベース保存

methods: {
  generateBase64Thumbnail() {
    html2canvas(this.$refs.thumbnailArea, {
      scale: 0.3,
      useCORS: true,
      background: 'white'
    }).then(canvas => {
      const base64Data = canvas.toDataURL('image/png');
      this.saveBase64Image({ image: base64Data });
    });
  }
}

async saveBase64Image(payload) {
  const response = await axios.post('/api/save-image', payload);
  if (response.data.success) {
    this.showToast('画像を保存しました');
  }
}

バックエンド実装例 (データベース保存)

@PostMapping("/save-image")
public ResponseEntity<String> saveImage(@RequestBody Map<String, String> payload) {
  String base64Data = payload.get("image");
  // Base64データを画像に変換して保存
  // (実際の保存ロジックは省略)
  return ResponseEntity.ok("画像をデータベースに保存");
}