perf: ⚡ 使用 OffscreenCanvas 重构优化

.xo-config.cjs

@@ -70,6 +70,7 @@ module.exports = {
     // 使用 process
     "n/prefer-global/process": ["error", "always"],
 
+
     //
     // 项目特有的规则
     //
@@ -122,6 +123,12 @@ module.exports = {
         "@typescript-eslint/no-unsafe-assignment": "off",
         "@typescript-eslint/no-unsafe-call": "off",
 
+        // 允许 return await
+        "@typescript-eslint/return-await": [
+          "off",
+          "error-handling-correctness-only",
+        ],
+
         // 在判断类型时允许使用 ||
         "@typescript-eslint/prefer-nullish-coalescing": [
           "error",

src/components/Manga/actions/translation/cotrans.ts

@@ -1,6 +1,6 @@
 import { t } from 'helper/i18n';
 import { log } from 'helper/logger';
-import { canvasToBlob } from 'helper';
+import { canvasToBlob, waitImgLoad } from 'helper';
 
 import { store } from '../../store';
 
@@ -63,31 +63,16 @@ const waitTranslation = (id: string, i: number) => {
 
 /** 将翻译后的内容覆盖到原图上 */
 const mergeImage = async (rawImage: Blob, maskUri: string) => {
-  const canvas = document.createElement('canvas');
+  const img = await waitImgLoad(URL.createObjectURL(rawImage));
+  const canvas = new OffscreenCanvas(img.width, img.height);
   const canvasCtx = canvas.getContext('2d')!;
-
-  const img = new Image();
-  img.src = URL.createObjectURL(rawImage);
-  await new Promise((resolve, reject) => {
-    img.onload = () => {
-      canvas.width = img.width;
-      canvas.height = img.height;
-      canvasCtx.drawImage(img, 0, 0);
-      resolve(null);
-    };
-
-    img.onerror = reject;
-  });
+  canvasCtx.drawImage(img, 0, 0);
 
   const img2 = new Image();
   img2.src = maskUri;
   img2.crossOrigin = 'anonymous';
-  await new Promise((resolve) => {
-    img2.onload = () => {
-      canvasCtx.drawImage(img2, 0, 0);
-      resolve(null);
-    };
-  });
+  await waitImgLoad(img2);
+  canvasCtx.drawImage(img2, 0, 0);
 
   return URL.createObjectURL(await canvasToBlob(canvas));
 };
@@ -96,23 +81,12 @@ const mergeImage = async (rawImage: Blob, maskUri: string) => {
 const resize = async (blob: Blob, w: number, h: number): Promise<Blob> => {
   if (w <= 4096 && h <= 4096) return blob;
 
-  const img = new Image();
-  img.src = URL.createObjectURL(blob);
-  await new Promise((resolve, reject) => {
-    img.onload = resolve;
-    img.onerror = reject;
-  });
-
-  if (w <= 4096 && h <= 4096) return blob;
-
   const scale = Math.min(4096 / w, 4096 / h);
   const width = Math.floor(w * scale);
   const height = Math.floor(h * scale);
 
-  const canvas = document.createElement('canvas');
-  canvas.width = width;
-  canvas.height = height;
-
+  const img = await waitImgLoad(URL.createObjectURL(blob));
+  const canvas = new OffscreenCanvas(width, height);
   const ctx = canvas.getContext('2d')!;
   ctx.imageSmoothingQuality = 'high';
   ctx.drawImage(img, 0, 0, width, height);

src/helper/detectAd.ts

@@ -1,4 +1,4 @@
-import { log, request, wait } from 'main';
+import { log, request, wait, waitImgLoad } from 'main';
 import QrScanner from 'qr-scanner';
 import type { AsyncReturnType } from 'type-fest';
 
@@ -46,12 +46,10 @@ const isGrayscalePixel = (r: number, g: number, b: number) =>
   r === g && r === b;
 
 /** 判断一张图是否是彩图 */
-const isColorImg = (imgCanvas: HTMLCanvasElement) => {
-  const canvas = document.createElement('canvas');
+const isColorImg = (imgCanvas: HTMLCanvasElement | OffscreenCanvas) => {
   // 缩小尺寸放弃细节，避免被黑白图上的小段彩色文字干扰
-  canvas.width = 3;
-  canvas.height = 3;
-  const ctx = canvas.getContext('2d')!;
+  const canvas = new OffscreenCanvas(3, 3);
+  const ctx = canvas.getContext('2d', { alpha: false })!;
   ctx.drawImage(imgCanvas, 0, 0, canvas.width, canvas.height);
 
   const { data } = ctx.getImageData(0, 0, canvas.width, canvas.height);
@@ -70,10 +68,7 @@ const imgToCanvas = async (img: HTMLImageElement | string) => {
     await wait(() => img.naturalHeight && img.naturalWidth, 1000 * 10);
 
     try {
-      const canvas = document.createElement('canvas');
-      canvas.width = img.width;
-      canvas.height = img.height;
-
+      const canvas = new OffscreenCanvas(img.width, img.height);
       const ctx = canvas.getContext('2d')!;
       ctx.drawImage(img, 0, 0);
       // 没被 CORS 污染就直接使用这个 canvas
@@ -84,15 +79,8 @@ const imgToCanvas = async (img: HTMLImageElement | string) => {
   const url = typeof img === 'string' ? img : img.src;
   const res = await request<Blob>(url, { responseType: 'blob' });
 
-  const image = new Image();
-  await new Promise((resolve, reject) => {
-    image.onload = resolve;
-    image.onerror = reject;
-    image.src = URL.createObjectURL(res.response);
-  });
-  const canvas = document.createElement('canvas');
-  canvas.width = image.width;
-  canvas.height = image.height;
+  const image = await waitImgLoad(URL.createObjectURL(res.response));
+  const canvas = new OffscreenCanvas(image.width, image.height);
   const ctx = canvas.getContext('2d')!;
   ctx.drawImage(image, 0, 0);
 
@@ -114,15 +102,15 @@ const qrCodeWhiteList = [
 
 /** 判断是否含有二维码 */
 const hasQrCode = async (
-  imgCanvas: HTMLCanvasElement,
+  imgCanvas: HTMLCanvasElement | OffscreenCanvas,
   scanRegion?: QrScanner.ScanRegion,
   qrEngine?: AsyncReturnType<typeof QrScanner.createQrEngine>,
-  canvas?: HTMLCanvasElement,
+  canvas?: HTMLCanvasElement | OffscreenCanvas,
 ) => {
   try {
     const { data } = await QrScanner.scanImage(imgCanvas, {
       qrEngine,
-      canvas,
+      canvas: canvas as HTMLCanvasElement,
       scanRegion,
       alsoTryWithoutScanRegion: true,
     });
@@ -135,9 +123,9 @@ const hasQrCode = async (
 };
 
 const isAdImg = async (
-  imgCanvas: HTMLCanvasElement,
+  imgCanvas: HTMLCanvasElement | OffscreenCanvas,
   qrEngine?: AsyncReturnType<typeof QrScanner.createQrEngine>,
-  canvas?: HTMLCanvasElement,
+  canvas?: HTMLCanvasElement | OffscreenCanvas,
 ) => {
   // 黑白图肯定不是广告
   if (!isColorImg(imgCanvas)) return false;
@@ -167,7 +155,7 @@ const isAdImg = async (
 const byContent =
   (
     qrEngine?: AsyncReturnType<typeof QrScanner.createQrEngine>,
-    canvas?: HTMLCanvasElement,
+    canvas?: HTMLCanvasElement | OffscreenCanvas,
   ) =>
   async (img: HTMLImageElement | string) =>
     isAdImg(await imgToCanvas(img), qrEngine, canvas);
@@ -178,7 +166,7 @@ export const getAdPageByContent = async (
   adList = new Set<number>(),
 ) => {
   const qrEngine = await QrScanner.createQrEngine();
-  const canvas = document.createElement('canvas');
+  const canvas = new OffscreenCanvas(1, 1);
   return getAdPage(imgList, byContent(qrEngine, canvas), adList);
 };
 

src/helper/index.ts

@@ -269,20 +269,35 @@ export const waitDom = (selector: string) =>
   wait(() => querySelector(selector));
 
 /** 等待指定的图片元素加载完成 */
-export const waitImgLoad = (img: HTMLImageElement, timeout = 1000 * 10) =>
-  new Promise<ErrorEvent | null>((resolve) => {
-    const id = window.setTimeout(
-      () => resolve(new ErrorEvent('timeout')),
-      timeout,
+export const waitImgLoad = (
+  target: HTMLImageElement | string,
+  timeout?: number,
+) =>
+  new Promise<HTMLImageElement>((resolve, reject) => {
+    const img = typeof target === 'string' ? new Image() : target;
+
+    const id = timeout
+      ? window.setTimeout(() => reject(new Error('timeout')), timeout)
+      : undefined;
+
+    img.addEventListener(
+      'load',
+      () => {
+        window.clearTimeout(id);
+        resolve(img);
+      },
+      { once: true },
     );
-    img.addEventListener('load', () => {
-      resolve(null);
-      window.clearTimeout(id);
-    });
-    img.addEventListener('error', (e) => {
-      resolve(e);
-      window.clearTimeout(id);
-    });
+    img.addEventListener(
+      'error',
+      (e) => {
+        window.clearTimeout(id);
+        reject(new Error(e.message));
+      },
+      { once: true },
+    );
+
+    if (typeof target === 'string') img.src = target;
   });
 
 /** 将指定的布尔值转换为字符串或未定义 */
@@ -349,19 +364,23 @@ export const testImgUrl = (url: string) =>
     img.src = url;
   });
 
-export const canvasToBlob = (
-  canvas: HTMLCanvasElement,
+export const canvasToBlob = async (
+  canvas: HTMLCanvasElement | OffscreenCanvas,
   type?: string,
   quality = 1,
-) =>
-  new Promise<Blob>((resolve, reject) => {
+) => {
+  if (canvas instanceof OffscreenCanvas)
+    return canvas.convertToBlob({ type, quality });
+
+  return new Promise<Blob>((resolve, reject) => {
     canvas.toBlob(
       (blob) =>
         blob ? resolve(blob) : reject(new Error('Canvas toBlob failed')),
       type,
       quality,
     );
   });
+};
 
 /**
  * 求 a 和 b 的差集，相当于从 a 中删去和 b 相同的属性

src/site/jm.tsx

@@ -90,8 +90,9 @@ import {
     }
 
     imgEle.src = URL.createObjectURL(res.response);
-    const err = await waitImgLoad(imgEle);
-    if (err) {
+    try {
+      await waitImgLoad(imgEle, 1000 * 10);
+    } catch {
       URL.revokeObjectURL(imgEle.src);
       imgEle.src = originalUrl;
       toast.warn(`加载原图时出错: ${imgEle.dataset.page}`);