fix(migrate): upload webp instead of svg

Author: std-microblock

migrate/migrate-bot.ts

@@ -254,11 +254,11 @@ description: Auto‑generated from cppreference
 // curl --location --request POST "https://api.imgbb.com/1/upload?expiration=600&key=YOUR_CLIENT_API_KEY" --form "image=R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
 async function uploadImageToImgBB(imageBuffer: Buffer): Promise<string> {
   const formData = new FormData();
-  formData.append("image", new Blob([new Uint8Array(imageBuffer)]), "diff.svg");
-  formData.append("name", "diff.svg");
+  formData.append("image", new Blob([new Uint8Array(imageBuffer)]), "diff.webp");
+  formData.append("name", "diff.webp");
 
   const response = await fetch(
-    `https://api.imgbb.com/1/upload?key=${IMGBB_API_KEY}&name=diff.svg`,
+    `https://api.imgbb.com/1/upload?key=${IMGBB_API_KEY}&name=diff.webp`,
     {
       method: "POST",
       body: formData,
@@ -296,9 +296,9 @@ async function createPullRequest(
 
   let imageUrl = null;
   if (originalInnerText && newInnerText) {
-    const svg = visualizeTextDiff(originalInnerText, newInnerText);
-    if (svg) {
-      imageUrl = await uploadImageToImgBB(svg);
+    const webp = visualizeTextDiff(originalInnerText, newInnerText);
+    if (webp) {
+      imageUrl = await uploadImageToImgBB(webp);
       console.log(`上传文本差异图像到 ImgBB: ${imageUrl}`);
     }
   }

migrate/text-diff-visualizer.ts

@@ -1,4 +1,4 @@
-import { createCanvas } from "canvas";
+import { createCanvas } from "@napi-rs/canvas";
 
 interface WordToken {
   display: string;
@@ -213,7 +213,7 @@ export function visualizeTextDiff(textA: string, textB: string) {
 
   totalY += config.padding;
 
-  const canvas = createCanvas(config.width, totalY, "svg");
+  const canvas = createCanvas(config.width, totalY);
   const ctx = canvas.getContext("2d");
 
   ctx.fillStyle = COLORS.bg;
@@ -336,13 +336,6 @@ export function visualizeTextDiff(textA: string, textB: string) {
     prevLineIdx = lineIdx;
   });
 
-  const buffer = canvas.toBuffer();
+  const buffer = canvas.toBuffer('image/webp');
   return buffer;
 }
-
-const svg = visualizeTextDiff(
-  "This is a sample text.\nIt has multiple lines.\nSome words are different.",
-  "This is a sample text.\nIt has several lines.\nSome words differ."
-);
-import { writeFileSync } from "fs";
-writeFileSync("text-diff.svg", svg);