feat[utils]: compressImages

packages/backend-cli/template/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @dage/backend-template
 
+## 1.0.12
+
+### Patch Changes
+
+- Updated dependencies
+  - @dage/utils@1.1.0
+  - @dage/pc-components@1.3.1
+  - @dage/service@1.0.4
+
 ## 1.0.11
 
 ### Patch Changes

packages/backend-cli/template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dage/backend-template",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^5.1.4",

packages/docs/.umirc.ts

@@ -91,16 +91,20 @@ export default defineConfig({
         path: "/utils/hooks",
       },
       {
-        title: "EventBus 事件",
-        path: "/utils/eventbus",
+        title: "string 方法",
+        path: "/utils/string",
+      },
+      {
+        title: "图片方法",
+        path: "/utils/image",
       },
       {
         title: "日期格式化",
         path: "/utils/date",
       },
       {
-        title: "string 方法",
-        path: "/utils/string",
+        title: "EventBus 事件",
+        path: "/utils/eventbus",
       },
     ],
     "/log": [

packages/docs/docs/log/KRPANO_CHANGELOG.md

@@ -1,5 +1,12 @@
 # @dage/krpano
 
+## 3.0.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @dage/utils@1.1.0
+
 ## 2.5.0
 
 ### Minor Changes

packages/docs/docs/log/PC-COMPONENTS_CHANGELOG.md

@@ -1,5 +1,13 @@
 # @dage/pc-components
 
+## 1.3.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @dage/utils@1.1.0
+  - @dage/service@1.0.4
+
 ## 1.3.0
 
 ### Minor Changes

packages/docs/docs/log/SERVICE_CHANGELOG.md

@@ -1,5 +1,12 @@
 # @dage/service
 
+## 1.0.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @dage/utils@1.1.0
+
 ## 1.0.3
 
 ### Patch Changes

packages/docs/docs/log/UTILS_CHANGELOG.md

@@ -1,5 +1,11 @@
 # @dage/utils
 
+## 1.1.0
+
+### Minor Changes
+
+- feat: compressImages
+
 ## 1.0.2
 
 ### Patch Changes

packages/docs/docs/utils/image.md

@@ -0,0 +1,13 @@
+## 方法
+
+### 图片压缩 compressImages
+
+支持最大宽度或者等比缩放
+
+| Name         | Description    | Type      | Default      |
+| ------------ | -------------- | --------- | ------------ |
+| list         | `列表`         | `T[] `    | `(required)` |
+| imgKey       | `图片的键名`   | `string ` | `thumb`      |
+| maxWidth     | `图片最大宽度` | `number ` | `--`         |
+| sizeRatio    | `等比压缩比例` | `number ` | `--`         |
+| qualityRatio | `画质`         | `number ` | `0.8`        |

packages/krpano/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @dage/krpano
 
+## 3.0.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @dage/utils@1.1.0
+
 ## 2.5.0
 
 ### Minor Changes

packages/krpano/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dage/krpano",
-  "version": "2.5.0",
+  "version": "3.0.0",
   "description": "krpano sdk",
   "module": "build/index.js",
   "main": "build/index.js",
@@ -18,7 +18,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@dage/utils": ">=1.0.0"
+    "@dage/utils": ">=1.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.22.10",

packages/krpano/src/components/VideoScene.tsx

@@ -94,25 +94,11 @@ export const VideoScene: FC<VideoSceneProps> = observer(
       onVisibility?.();
     };
 
-    const wechatJSReadyHandler = () => {
-      alert(model.playing);
-      model.playing && model.play();
-    };
-
     useEffect(() => {
       window.addEventListener("visibilitychange", visibilityHandler);
-      document.addEventListener(
-        "WeixinJSBridgeReady",
-        wechatJSReadyHandler,
-        false
-      );
 
       return () => {
         window.removeEventListener("visibilitychange", visibilityHandler);
-        document.removeEventListener(
-          "WeixinJSBridgeReady",
-          wechatJSReadyHandler
-        );
       };
     }, []);
 

packages/pc-components/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @dage/pc-components
 
+## 1.3.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @dage/utils@1.1.0
+  - @dage/service@1.0.4
+
 ## 1.3.0
 
 ### Minor Changes

packages/pc-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dage/pc-components",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "PC 端组件库",
   "module": "dist/index.js",
   "main": "dist/index.js",

packages/service/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @dage/service
 
+## 1.0.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @dage/utils@1.1.0
+
 ## 1.0.3
 
 ### Patch Changes

packages/service/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dage/service",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "接口请求工具",
   "module": "dist/index.js",
   "main": "dist/index.js",

packages/utils/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @dage/utils
 
+## 1.1.0
+
+### Minor Changes
+
+- feat: compressImages
+
 ## 1.0.2
 
 ### Patch Changes

packages/utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dage/utils",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "工具类",
   "sideEffects": false,
   "module": "dist/index.js",

packages/utils/src/image.ts

@@ -0,0 +1,87 @@
+/**
+ * 图片压缩
+ */
+export const compressImages = <T extends Record<string, any>>(params: {
+  list: T[];
+  /**
+   * 图片的键名
+   * @default thumb
+   */
+  imgKey?: string;
+  /**
+   * 图片最大宽度
+   */
+  maxWidth?: number;
+  /**
+   * 等比压缩比例
+   */
+  sizeRatio?: number;
+  /**
+   * 画质
+   * @default 0.8
+   */
+  qualityRatio?: number;
+}) => {
+  const {
+    list,
+    imgKey = "thumb",
+    maxWidth,
+    sizeRatio,
+    qualityRatio = 0.8,
+  } = params;
+
+  return Promise.all<{ _thumb: string } & T>(
+    list.map((item) => {
+      return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = "anonymous"; // 设置 CORS 属性
+        img.src = item[imgKey];
+
+        img.onload = () => {
+          const canvas = document.createElement("canvas");
+          const ctx = canvas.getContext("2d");
+
+          // 根据传入参数计算新的宽高
+          let newWidth, newHeight;
+          if (sizeRatio) {
+            newWidth = img.width * sizeRatio;
+            newHeight = img.height * sizeRatio;
+          } else if (maxWidth) {
+            newWidth = Math.min(maxWidth, img.width);
+            newHeight = (newWidth / img.width) * img.height;
+          } else {
+            // 如果未指定比例或最大宽度，保持原尺寸
+            newWidth = img.width;
+            newHeight = img.height;
+          }
+
+          canvas.width = newWidth;
+          canvas.height = newHeight;
+
+          // 绘制压缩后的图像
+          ctx?.drawImage(img, 0, 0, newWidth, newHeight);
+
+          canvas.toBlob(
+            (blob) => {
+              if (blob) {
+                const url = URL.createObjectURL(blob);
+                resolve({
+                  ...item,
+                  _thumb: url,
+                });
+              } else {
+                reject(new Error("Blob 创建失败"));
+              }
+            },
+            "image/jpeg",
+            qualityRatio
+          );
+        };
+
+        img.onerror = () => {
+          reject(new Error("图片加载失败：" + item[imgKey]));
+        };
+      });
+    })
+  );
+};

packages/utils/src/index.ts

@@ -1,6 +1,7 @@
-export * from "./eventBus";
-export * from "./base64";
-export * from "./date";
-export * from "./string";
-export * from "./query-string";
-export * from "./noop";
+export * from "./eventBus";
+export * from "./base64";
+export * from "./date";
+export * from "./string";
+export * from "./query-string";
+export * from "./noop";
+export * from "./image";