修复 JMC 安卓图片无法显示问题 (#178)

* 🐛 #162 * 🚧 optimize * 🔖 v0.7.7
youniaogu · Jan 12, 2025 · fbdb0bb · fbdb0bb
1 parent 9193ffd
commit fbdb0bb
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 45 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -78,8 +78,8 @@ android {
         applicationId "com.youniaogu.mangareader"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 50
-        versionName "0.7.6"
+        versionCode 51
+        versionName "0.7.7"
     }
     signingConfigs {
         debug {

diff --git a/ios/MangaReader.xcodeproj/project.pbxproj b/ios/MangaReader.xcodeproj/project.pbxproj
@@ -504,15 +504,15 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
-				CURRENT_PROJECT_VERSION = 50;
+				CURRENT_PROJECT_VERSION = 51;
 				DEVELOPMENT_TEAM = VAL2KK2S94;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = MangaReader/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 0.7.6;
+				MARKETING_VERSION = 0.7.7;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -533,15 +533,15 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
-				CURRENT_PROJECT_VERSION = 50;
+				CURRENT_PROJECT_VERSION = 51;
 				DEVELOPMENT_TEAM = VAL2KK2S94;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = MangaReader/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 0.7.6;
+				MARKETING_VERSION = 0.7.7;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mangareader",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "publishTime": "2025-01-12",
   "private": true,
   "scripts": {

diff --git a/src/components/ComicImage.tsx b/src/components/ComicImage.tsx
@@ -272,7 +272,7 @@ const ScrambleImage = ({
         const ctx = canvasRef.current.getContext('2d');
         const image = new CanvasImage(canvasRef.current);
 
-        image.src = base64;
+        image.addEventListener('error', handleError);
         image.addEventListener('load', (event) => {
           // don't use Image.getSize from react-native
           // Image.getSize return wrong width and height when image have a huge width or height
@@ -282,50 +282,46 @@ const ScrambleImage = ({
           const height = event.target.height;
           const step = unscramble(i, width, height, scrambleType);
 
-          if (canvasRef.current) {
-            // if image size more than maxPixelSize, scale image to smaller
-            const imageScale = Math.floor(Math.min(maxPixelSize / (width * height), 1) * 100) / 100;
-            const scale = imageScale / windowScale;
-
-            canvasRef.current.width = width * scale;
-            canvasRef.current.height = height * scale;
-            ctx.scale(scale, scale);
-          } else {
-            return handleError();
+          if (!canvasRef.current) {
+            handleError();
+            return;
           }
 
+          // if image size more than maxPixelSize, scale image to smaller
+          const imageScale = Math.floor(Math.min(maxPixelSize / (width * height), 1) * 100) / 100;
+          const scale = imageScale / windowScale;
+
+          canvasRef.current.width = width * scale;
+          canvasRef.current.height = height * scale;
+          ctx.scale(scale, scale);
+
           step.forEach(({ dx, dy, sx, sy, sWidth, sHeight, dWidth, dHeight }) => {
             ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
           });
 
-          if (canvasRef.current) {
-            canvasRef.current
-              .toDataURL()
-              .then((res) => {
-                const { dWidth, dHeight } = aspectFit(
-                  { width, height },
-                  {
-                    width: (windowWidth - left - right) / 2,
-                    height: windowHeight - top - bottom,
-                  }
-                );
-                updateData({
-                  ...imageState,
-                  dataUrl: res.replace(/^"|"$/g, ''),
-                  multipleFitWidth: dWidth,
-                  multipleFitHeight: dHeight,
-                  landscapeHeight: (height / width) * Math.max(windowWidth, windowHeight),
-                  portraitHeight: (height / width) * Math.min(windowWidth, windowHeight),
-                  loadStatus: AsyncStatus.Fulfilled,
-                });
-              })
-              .catch(() => {
-                handleError();
+          canvasRef.current
+            .toDataURL()
+            .then((res) => {
+              const { dWidth, dHeight } = aspectFit(
+                { width, height },
+                {
+                  width: (windowWidth - left - right) / 2,
+                  height: windowHeight - top - bottom,
+                }
+              );
+              updateData({
+                ...imageState,
+                dataUrl: res.replace(/^"|"$/g, ''),
+                multipleFitWidth: dWidth,
+                multipleFitHeight: dHeight,
+                landscapeHeight: (height / width) * Math.max(windowWidth, windowHeight),
+                portraitHeight: (height / width) * Math.min(windowWidth, windowHeight),
+                loadStatus: AsyncStatus.Fulfilled,
               });
-          } else {
-            handleError();
-          }
+            })
+            .catch(handleError);
         });
+        image.src = base64;
       } else {
         handleError();
       }

diff --git a/src/plugins/jmc.ts b/src/plugins/jmc.ts
@@ -347,7 +347,8 @@ class CopyManga extends Base {
           ...this.defaultHeaders,
           referer: 'https://18comic.vip/',
           accept: 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
-          'accept-encoding': 'gzip, deflate, br, zstd',
+          // gzip 返回的内容会压缩，导致 base64 encode 出来 MIME type 为 image/gzip，无法直接显示
+          // 'accept-encoding': 'gzip, deflate, br, zstd',
           'accept-language': 'zh-CN,zh;q=0.9,en;q=0.8',
         },
         images: images.map((uri) => ({