@egova-mobile/app-media-utils 0.0.5 → 0.0.7

package/dist/image/image-processor.d.ts

@@ -5,7 +5,8 @@ export declare class ResizeOptions {
 }
 export declare class CompressOptions {
     photoFileSizeLimit: number;
-    constructor(photoFileSizeLimit: number);
+    keepFileType: boolean;
+    constructor(photoFileSizeLimit: number, keepFileType?: boolean);
 }
 export declare class ImageProcessor {
     private file;
@@ -14,7 +15,11 @@ export declare class ImageProcessor {
     private compressOptions;
     constructor(file: File, resizeOptions: ResizeOptions, watermarkOptions: WatermarkOptions, compressOptions: CompressOptions);
     process(): Promise<void | File>;
-    compress(canvas: HTMLCanvasElement, filename: string, lastModified: number, type: string, quality: number, lastCompressFileSize?: number): Promise<File>;
+    /**
+     * 根据 MIME 类型获取文件扩展名
+     */
+    private getExtensionFromMimeType;
+    compress(canvas: HTMLCanvasElement, filename: string, lastModified: number, type: string, quality: number, lastCompressFileSize?: number, originalFileType?: string): Promise<File>;
     /**
      * 浮点型数据比较大小
      */

package/dist/image/image-util.d.ts

@@ -33,7 +33,7 @@ export declare function canvas2Image(canvas: HTMLCanvasElement, type?: string, q
  * @param quality
  * @see {@link https://meshworld.in/convert-canvas-to-an-image-using-javascript/}
  */
-export declare function canvas2File(canvas: HTMLCanvasElement, fileName: string, lastModified: number, type?: string, quality?: number): Promise<File>;
+export declare function canvas2File(canvas: HTMLCanvasElement, fileName: string, lastModified: number, type?: string, quality?: number, forceFileType?: string): Promise<File>;
 export type ResizeResultType = 'image' | 'canvas';
 /**
  * 缩放图片

package/dist/index.cjs.js

@@ -1368,9 +1368,10 @@ function image2Canvas(img, type, width, height) {
   canvas.height = _height;
   const ctx = canvas.getContext("2d");
   if (ctx) {
-    ctx.fillStyle = "transparent";
-    if (type === "image/jpeg") {
+    const needWhiteBackground = type === "image/jpeg" || type === "image/jpg" || type === "image/bmp";
+    if (needWhiteBackground) {
       ctx.fillStyle = "#fff";
+      ctx.fillRect(0, 0, _width, _height);
     }
     ctx.drawImage(img, 0, 0, _width, _height);
     return Promise.resolve(canvas);
@@ -1383,18 +1384,20 @@ function canvas2Image(canvas, type = "image/jpeg", quality = 0.8) {
   image.src = canvas.toDataURL(type, quality);
   return Promise.resolve(image);
 }
-function canvas2File(canvas, fileName, lastModified, type = "image/jpeg", quality = 0.8) {
+function canvas2File(canvas, fileName, lastModified, type = "image/jpeg", quality = 0.8, forceFileType) {
   return new Promise((resolve, reject) => {
+    const blobType = type === "image/gif" ? "image/png" : type;
     canvas.toBlob(
       (blob) => {
         if (!blob) {
           reject(new Error("canvas文件导出失败"));
         } else {
-          const file = new File([blob], fileName, { lastModified, type });
+          const fileType = forceFileType || type;
+          const file = new File([blob], fileName, { lastModified, type: fileType });
           resolve(file);
         }
       },
-      type,
+      blobType,
       quality
     );
   });
@@ -1455,13 +1458,14 @@ var ResizeOptions = class {
   }
 };
 var CompressOptions = class {
-  // 图片大小限制，单位kb
-  constructor(photoFileSizeLimit) {
+  // 是否保持原始文件类型
+  constructor(photoFileSizeLimit, keepFileType = false) {
     if (checkIsUndefinedOrNull(photoFileSizeLimit)) {
       this.photoFileSizeLimit = PHOTO_FILE_SIZE_LIMIT;
     } else {
       this.photoFileSizeLimit = photoFileSizeLimit;
     }
+    this.keepFileType = keepFileType;
   }
 };
 var ImageProcessor = class {
@@ -1475,12 +1479,15 @@ var ImageProcessor = class {
   process() {
     const filename = this.file.name;
     const { lastModified } = this.file;
-    let fileType = this.file.type;
-    if (this.file.size > this.compressOptions.photoFileSizeLimit * 1024) {
-      fileType = "image/jpeg";
-    }
-    if (fileType === "image/gif") {
-      fileType = "image/png";
+    const originalFileType = this.file.type;
+    let fileType = originalFileType;
+    if (!this.compressOptions.keepFileType) {
+      if (this.file.size > this.compressOptions.photoFileSizeLimit * 1024) {
+        fileType = "image/jpeg";
+      }
+      if (fileType === "image/gif") {
+        fileType = "image/png";
+      }
     }
     return file2Image(this.file).then((img) => {
       return resize(img, {
@@ -1492,18 +1499,43 @@ var ImageProcessor = class {
       const canvas = result;
       return yield renderWatermark(canvas, this.watermarkOptions);
     })).then((canvas) => {
-      const exportFilename = filename.replace(/\./g, "-") + ".jpg";
+      let exportFilename;
+      if (this.compressOptions.keepFileType) {
+        const ext = this.getExtensionFromMimeType(fileType);
+        exportFilename = filename.replace(/\.[^.]+$/, "") + "." + ext;
+      } else {
+        exportFilename = filename.replace(/\./g, "-") + ".jpg";
+      }
       return this.compress(
         canvas,
         exportFilename,
         lastModified,
         fileType,
-        DEFAULT_JPEG_QUALITY
+        DEFAULT_JPEG_QUALITY,
+        -1,
+        originalFileType
+        // 传入原始文件类型，用于GIF等特殊格式
       );
     });
   }
-  compress(canvas, filename, lastModified, type, quality, lastCompressFileSize = -1) {
-    return canvas2File(canvas, filename, lastModified, type, quality).then(
+  /**
+   * 根据 MIME 类型获取文件扩展名
+   */
+  getExtensionFromMimeType(mimeType) {
+    const mimeToExt = {
+      "image/jpeg": "jpg",
+      "image/jpg": "jpg",
+      "image/png": "png",
+      "image/gif": "gif",
+      "image/webp": "webp",
+      "image/bmp": "bmp",
+      "image/svg+xml": "svg"
+    };
+    return mimeToExt[mimeType] || "jpg";
+  }
+  compress(canvas, filename, lastModified, type, quality, lastCompressFileSize = -1, originalFileType) {
+    const forceFileType = originalFileType === "image/gif" ? originalFileType : void 0;
+    return canvas2File(canvas, filename, lastModified, type, quality, forceFileType).then(
       (file) => {
         let qualityStep = JPEG_QUALITY_STEP;
         if (file.size > this.compressOptions.photoFileSizeLimit * 1024) {
@@ -1523,7 +1555,8 @@ var ImageProcessor = class {
             lastModified,
             type,
             this.roundToDecimalPlace(nextCompressQuality, 2),
-            file.size
+            file.size,
+            originalFileType
           );
         } else {
           return Promise.resolve(file);

package/dist/index.esm.mjs

@@ -1343,9 +1343,10 @@ function image2Canvas(img, type, width, height) {
   canvas.height = _height;
   const ctx = canvas.getContext("2d");
   if (ctx) {
-    ctx.fillStyle = "transparent";
-    if (type === "image/jpeg") {
+    const needWhiteBackground = type === "image/jpeg" || type === "image/jpg" || type === "image/bmp";
+    if (needWhiteBackground) {
       ctx.fillStyle = "#fff";
+      ctx.fillRect(0, 0, _width, _height);
     }
     ctx.drawImage(img, 0, 0, _width, _height);
     return Promise.resolve(canvas);
@@ -1358,18 +1359,20 @@ function canvas2Image(canvas, type = "image/jpeg", quality = 0.8) {
   image.src = canvas.toDataURL(type, quality);
   return Promise.resolve(image);
 }
-function canvas2File(canvas, fileName, lastModified, type = "image/jpeg", quality = 0.8) {
+function canvas2File(canvas, fileName, lastModified, type = "image/jpeg", quality = 0.8, forceFileType) {
   return new Promise((resolve, reject) => {
+    const blobType = type === "image/gif" ? "image/png" : type;
     canvas.toBlob(
       (blob) => {
         if (!blob) {
           reject(new Error("canvas文件导出失败"));
         } else {
-          const file = new File([blob], fileName, { lastModified, type });
+          const fileType = forceFileType || type;
+          const file = new File([blob], fileName, { lastModified, type: fileType });
           resolve(file);
         }
       },
-      type,
+      blobType,
       quality
     );
   });
@@ -1430,13 +1433,14 @@ var ResizeOptions = class {
   }
 };
 var CompressOptions = class {
-  // 图片大小限制，单位kb
-  constructor(photoFileSizeLimit) {
+  // 是否保持原始文件类型
+  constructor(photoFileSizeLimit, keepFileType = false) {
     if (checkIsUndefinedOrNull(photoFileSizeLimit)) {
       this.photoFileSizeLimit = PHOTO_FILE_SIZE_LIMIT;
     } else {
       this.photoFileSizeLimit = photoFileSizeLimit;
     }
+    this.keepFileType = keepFileType;
   }
 };
 var ImageProcessor = class {
@@ -1450,12 +1454,15 @@ var ImageProcessor = class {
   process() {
     const filename = this.file.name;
     const { lastModified } = this.file;
-    let fileType = this.file.type;
-    if (this.file.size > this.compressOptions.photoFileSizeLimit * 1024) {
-      fileType = "image/jpeg";
-    }
-    if (fileType === "image/gif") {
-      fileType = "image/png";
+    const originalFileType = this.file.type;
+    let fileType = originalFileType;
+    if (!this.compressOptions.keepFileType) {
+      if (this.file.size > this.compressOptions.photoFileSizeLimit * 1024) {
+        fileType = "image/jpeg";
+      }
+      if (fileType === "image/gif") {
+        fileType = "image/png";
+      }
     }
     return file2Image(this.file).then((img) => {
       return resize(img, {
@@ -1467,18 +1474,43 @@ var ImageProcessor = class {
       const canvas = result;
       return yield renderWatermark(canvas, this.watermarkOptions);
     })).then((canvas) => {
-      const exportFilename = filename.replace(/\./g, "-") + ".jpg";
+      let exportFilename;
+      if (this.compressOptions.keepFileType) {
+        const ext = this.getExtensionFromMimeType(fileType);
+        exportFilename = filename.replace(/\.[^.]+$/, "") + "." + ext;
+      } else {
+        exportFilename = filename.replace(/\./g, "-") + ".jpg";
+      }
       return this.compress(
         canvas,
         exportFilename,
         lastModified,
         fileType,
-        DEFAULT_JPEG_QUALITY
+        DEFAULT_JPEG_QUALITY,
+        -1,
+        originalFileType
+        // 传入原始文件类型，用于GIF等特殊格式
       );
     });
   }
-  compress(canvas, filename, lastModified, type, quality, lastCompressFileSize = -1) {
-    return canvas2File(canvas, filename, lastModified, type, quality).then(
+  /**
+   * 根据 MIME 类型获取文件扩展名
+   */
+  getExtensionFromMimeType(mimeType) {
+    const mimeToExt = {
+      "image/jpeg": "jpg",
+      "image/jpg": "jpg",
+      "image/png": "png",
+      "image/gif": "gif",
+      "image/webp": "webp",
+      "image/bmp": "bmp",
+      "image/svg+xml": "svg"
+    };
+    return mimeToExt[mimeType] || "jpg";
+  }
+  compress(canvas, filename, lastModified, type, quality, lastCompressFileSize = -1, originalFileType) {
+    const forceFileType = originalFileType === "image/gif" ? originalFileType : void 0;
+    return canvas2File(canvas, filename, lastModified, type, quality, forceFileType).then(
       (file) => {
         let qualityStep = JPEG_QUALITY_STEP;
         if (file.size > this.compressOptions.photoFileSizeLimit * 1024) {
@@ -1498,7 +1530,8 @@ var ImageProcessor = class {
             lastModified,
             type,
             this.roundToDecimalPlace(nextCompressQuality, 2),
-            file.size
+            file.size,
+            originalFileType
           );
         } else {
           return Promise.resolve(file);

package/package.json

@@ -1,23 +1,10 @@
 {
   "name": "@egova-mobile/app-media-utils",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.mjs",
   "typings": "dist/index.d.ts",
-  "scripts": {
-    "clean": "rimraf ./dist",
-    "dev": "node ./build.js -w",
-    "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
-    "build:bundle": "node ./build.js",
-    "build": "pnpm clean && pnpm build:bundle && pnpm build:types",
-    "release": "zartui-mobile-cli release",
-    "prepare": "pnpm build"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
   "exports": {
     ".": {
       "import": "./dist/index.esm.mjs",
@@ -41,5 +28,13 @@
   },
   "peerDependencies": {
     "dayjs": "^1.11.8"
+  },
+  "scripts": {
+    "clean": "rimraf ./dist",
+    "dev": "node ./build.js -w",
+    "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
+    "build:bundle": "node ./build.js",
+    "build": "pnpm clean && pnpm build:bundle && pnpm build:types",
+    "release": "zartui-mobile-cli release"
   }
-}
+}