fix(useimage): fix compressor track due to toBlob error

innocces · Mar 21, 2022 · f320557 · f320557
1 parent 13df359
commit f320557
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 14 deletions.
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
@@ -48,7 +48,7 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.14.6",
-    "compressorjs": "^1.0.7",
+    "compressorjs-global": "^1.1.1",
     "lodash-wechat": "^1.0.0",
     "lodash.uniq": "^4.5.0",
     "querystring": "^0.2.1"

diff --git a/packages/hooks/src/useImage/index.ts b/packages/hooks/src/useImage/index.ts
@@ -7,9 +7,8 @@ import Taro, {
   chooseMessageFile,
 } from '@tarojs/taro';
 import { useCallback, useState } from 'react';
-import Compressor from 'compressorjs';
 import useEnv from '../useEnv';
-import { saveImageForH5, downloadImage, generateBlobUrl } from './utils';
+import { saveImageForH5, downloadImage, compressForH5 } from './utils';
 import { ENV_TYPE } from '../constant';
 
 export type ChooseImageOption = Partial<
@@ -193,17 +192,7 @@ function useImage(options: ChooseImageOption): [IFileInfo, IAction] {
         try {
           if (env === ENV_TYPE.WEB) {
             const blob = await downloadImage(src);
-            new Compressor(blob, {
-              quality: (quality || 80) / 100,
-              success: (res) => {
-                const tempFilePath = generateBlobUrl(res);
-                resolve({
-                  tempFilePath,
-                  errMsg: 'compressImage:ok',
-                });
-              },
-              error: reject,
-            });
+            compressForH5(blob, quality).then(resolve, reject);
           } else {
             Taro.compressImage({
               src,

diff --git a/packages/hooks/src/useImage/utils.ts b/packages/hooks/src/useImage/utils.ts
@@ -1,3 +1,5 @@
+import Compressor from 'compressorjs';
+
 export const downloadImage = async (filePath: string) => {
   const responese = await fetch(filePath);
   const blob = await responese.blob();
@@ -32,3 +34,19 @@ export const saveImageForH5 = async (filePath: string) => {
   }
   return false;
 };
+
+export const compressForH5 = (blob: Blob, quality?: number) => {
+  return new Promise((resolve, reject) => {
+    new Compressor(blob, {
+      quality: (quality || 80) / 100,
+      success: (res) => {
+        const tempFilePath = generateBlobUrl(res);
+        resolve({
+          tempFilePath,
+          errMsg: 'compressImage:ok',
+        });
+      },
+      error: reject,
+    });
+  });
+};