fix: 🐛 修复 ehentai 广告识别失效的 bug

Author: hymbz

src/components/Manga/actions/imageLoad.ts

@@ -7,9 +7,8 @@ import {
   singleThreaded,
   t,
 } from 'helper';
-import { request } from 'request';
+import { downloadImgHeaders as headers, request } from 'request';
 
-import { downloadImgHeaders as headers } from '../helper';
 import { setState, store } from '../store';
 import { getImg, getImgEle, getImgIndexs } from './helper';
 import { handleImgRecognition } from './imageRecognition';

src/components/Manga/helper.ts

@@ -1,7 +1,6 @@
 import type { RequestDetails } from 'request';
 
-import { t } from 'helper';
-import { request } from 'request';
+import { downloadImg as _downloadImg } from 'request';
 
 import { setState, store } from './store';
 
@@ -19,11 +18,6 @@ export const playAnimation = (e?: HTMLElement) => {
   }
 };
 
-export const downloadImgHeaders = {
-  Accept: 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
-  'User-Agent': navigator.userAgent,
-  Referer: location.href,
-};
 export const downloadImg = async (
   imgUrl: string,
   details?: RequestDetails<Blob>,
@@ -35,16 +29,8 @@ export const downloadImg = async (
     return res.blob();
   }
 
-  const res = await request<Blob>(url, {
-    responseType: 'blob',
-    errorText: t('translation.tip.download_img_failed'),
-    headers: downloadImgHeaders,
-    retryFetch: true,
-    ...details,
-  });
-
+  const res = await _downloadImg(url, details);
   if (Reflect.has(store.imgMap, imgUrl))
-    setState('imgMap', imgUrl, 'blobUrl', URL.createObjectURL(res.response));
-
-  return res.response;
+    setState('imgMap', imgUrl, 'blobUrl', URL.createObjectURL(res));
+  return res;
 };

src/components/Manga/index.tsx

@@ -104,6 +104,5 @@ export { SettingsItem } from './components/SettingsItem';
 export { SettingsItemButton } from './components/SettingsItemButton';
 export { SettingsItemNumber } from './components/SettingsItemNumber';
 export { SettingsItemSwitch } from './components/SettingsItemSwitch';
-export { downloadImg, downloadImgHeaders } from './helper';
 export type { ComicImg } from './store/image';
 export { refs, setState, store } from './store/index';

src/helper/spriteImage.ts

@@ -0,0 +1,45 @@
+import { downloadImg } from '../request';
+
+export const imageBitmapCache = new Map<string, ImageBitmap>();
+
+/** 下载图片并转换为ImageBitmap */
+const loadImageBitmap = async (url: string): Promise<ImageBitmap> => {
+  // 如果缓存中已有，直接返回
+  if (imageBitmapCache.has(url)) return imageBitmapCache.get(url)!;
+
+  const blob = await downloadImg(url);
+  const imageBitmap = await createImageBitmap(blob);
+  imageBitmapCache.set(url, imageBitmap);
+  return imageBitmap;
+};
+
+/** 从雪碧图中切割指定区域的图片 */
+export const extractSpriteImage = async (style: CSSStyleDeclaration) => {
+  const {
+    width,
+    height,
+    backgroundImage,
+    backgroundPositionX: backgroundX,
+    backgroundPositionY: backgroundY,
+  } = style;
+
+  const urlMatch = backgroundImage.match(/url\(['"]([^)]+)['"]\)/);
+  if (!urlMatch) throw new Error('解析不到背景图片URL');
+  const [, url] = urlMatch;
+
+  const spriteImage = await loadImageBitmap(url);
+
+  const w = parseFloat(width);
+  const h = parseFloat(height);
+  const canvas = new OffscreenCanvas(w, h);
+  const ctx = canvas.getContext('2d')!;
+
+  ctx.clearRect(0, 0, w, h);
+
+  const sourceX = -parseFloat(backgroundX);
+  const sourceY = -parseFloat(backgroundY);
+
+  ctx.drawImage(spriteImage, sourceX, sourceY, w, h, 0, 0, w, h);
+
+  return canvas.transferToImageBitmap();
+};

src/index.ts

@@ -1,6 +1,6 @@
 import type { InitOptions } from 'main';
 
-import { downloadImgHeaders, type MangaProps } from 'components/Manga';
+import { type MangaProps } from 'components/Manga';
 import {
   fileType,
   isUrl,
@@ -23,8 +23,7 @@ import { request, toast, universal } from 'main';
 import { getImglistByHtml } from 'userscript/copyApi';
 import { otherSite } from 'userscript/otherSite';
 
-import type { RequestDetails } from './request';
-
+import { downloadImgHeaders, type RequestDetails } from './request';
 import { getNhentaiData, toImgList } from './userscript/nhentaiApi';
 
 /** 站点配置 */

src/request.ts

@@ -170,3 +170,28 @@ export const eachApi = async <T = any>(
   log.error('所有 api 请求均失败', url, baseUrlList, details);
   throw new Error(errorText);
 };
+
+export const downloadImgHeaders = {
+  Accept: 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
+  'User-Agent': navigator.userAgent,
+  Referer: location.href,
+};
+export const downloadImg = async (
+  url: string,
+  details?: RequestDetails<Blob>,
+) => {
+  if (url.startsWith('blob:')) {
+    const res = await fetch(url);
+    return res.blob();
+  }
+
+  const res = await request<Blob>(url, {
+    responseType: 'blob',
+    errorText: t('translation.tip.download_img_failed'),
+    headers: downloadImgHeaders,
+    retryFetch: true,
+    ...details,
+  });
+
+  return res.response;
+};

src/site/ehentai/detectAd.ts

@@ -4,6 +4,8 @@ import { getAdPageByContent, getAdPageByFileName } from 'userscript/detectAd';
 
 import type { GalleryContext } from './helper';
 
+import { extractSpriteImage } from '../../helper/spriteImage';
+
 /** 识别广告 */
 export const detectAd = ({
   store: { comicMap },
@@ -20,43 +22,43 @@ export const detectAd = ({
   setState('comicMap', '', 'adList', new ReactiveSet());
 
   /** 缩略图列表 */
-  const thumbnailList: (string | HTMLImageElement)[] = [];
-  for (const e of querySelectorAll<HTMLAnchorElement>('#gdt > a')) {
-    const index = Number(/.+-(\d+)/.exec(e.href)?.[1]) - 1;
-    if (Number.isNaN(index)) continue;
-    pageList[index] = e.href;
+  const thumbnailList: (ImageBitmap | HTMLImageElement)[] = [];
+  (async () => {
+    for (const e of querySelectorAll<HTMLAnchorElement>('#gdt > a')) {
+      const index = Number(/.+-(\d+)/.exec(e.href)?.[1]) - 1;
+      if (Number.isNaN(index)) continue;
+      pageList[index] = e.href;
 
-    const thumbnail = e.querySelector<HTMLElement>('[title]')!;
-    [, fileNameList[index]] = thumbnail.title.split(/：|: /);
-    thumbnailList[index] =
-      thumbnail.tagName === 'IMG'
-        ? (thumbnail as HTMLImageElement)
-        : /url\("(.+)"\)/.exec(thumbnail.style.backgroundImage)![1];
-  }
+      const thumbnail = e.querySelector<HTMLElement>('[title]')!;
+      [, fileNameList[index]] = thumbnail.title.split(/：|: /);
+      if (thumbnail.tagName === 'IMG')
+        thumbnailList[index] = thumbnail as HTMLImageElement;
+      if (thumbnail.style.background.includes('url('))
+        thumbnailList[index] = await extractSpriteImage(thumbnail.style);
+    }
 
-  (async () => {
     // 先根据文件名判断一次
     await getAdPageByFileName(fileNameList, comicMap[''].adList!);
     // 不行的话再用缩略图识别
     if (comicMap[''].adList!.size === 0)
       await getAdPageByContent(thumbnailList, comicMap[''].adList!);
+  })();
 
-    // 模糊广告页的缩略图
-    useStyle(
-      createRootMemo(() => {
-        if (!comicMap['']?.adList?.size) return '';
-        return [...comicMap[''].adList]
-          .map(
-            (i) => `a[href="${pageList[i]}"] [title]:not(:hover) {
+  // 模糊广告页的缩略图
+  useStyle(
+    createRootMemo(() => {
+      if (!comicMap['']?.adList?.size) return '';
+      return [...comicMap[''].adList]
+        .map(
+          (i) => `a[href="${pageList[i]}"] [title]:not(:hover) {
               filter: blur(8px);
               clip-path: border-box;
               backdrop-filter: blur(8px);
             }`,
-          )
-          .join('\n');
-      }),
-    );
-  })();
+        )
+        .join('\n');
+    }),
+  );
 
   // 返回在图片加载时检查图片的函数
   return {

src/site/ehentai/index.tsx

@@ -311,7 +311,11 @@ import { tagLint } from './tagLint';
           return { src: context.imgList[i], name: context.fileNameList[i] };
         },
         length: () => loadImgs().length,
-        onEnd: checkAd?.checkContent,
+        // 在最后十页的图片url加载出来后再检查广告
+        onLoad:
+          checkAd?.checkContent &&
+          ((_, __, list) =>
+            list.slice(-10, -1).every(Boolean) && checkAd?.checkContent()),
       });
     },
   });

src/userscript/detectAd.ts

@@ -89,12 +89,13 @@ export const isAdImg = (imgBitmap: ImageBitmap) => {
 
 /** 通过图片内容判断是否是广告 */
 export const getAdPageByContent = (
-  imgList: (HTMLImageElement | string | undefined)[],
+  imgList: (HTMLImageElement | string | ImageBitmap | undefined)[],
   adList: Set<number>,
 ) =>
   getAdPage(
     imgList,
-    async (img: HTMLImageElement | string) => isAdImg(await imgToCanvas(img)),
+    async (img: HTMLImageElement | string | ImageBitmap) =>
+      isAdImg(img instanceof ImageBitmap ? img : await imgToCanvas(img)),
     adList,
   );
 

src/userscript/main/index.ts

@@ -88,7 +88,11 @@ export type MainContext<T extends Record<string, any> = Record<string, any>> = {
     id?: string | number;
     /** 并发数 */
     concurrency?: number;
-    /** 加载完成后触发的回调 */
-    onEnd?: () => void;
+    /** 加载完成一个后触发的回调 */
+    onLoad?: (
+      img: string | ComicImgData,
+      index: number,
+      imgList: (string | ComicImgData)[],
+    ) => void;
   }) => Promise<MangaProps['imgList']>;
 };