@egova-mobile/app-media-utils 0.0.4 → 0.0.6

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

package/dist/index.cjs.js

@@ -1216,7 +1216,7 @@ function drawGroupedWatermarks(canvas, watermarks, groupPosition) {
       const tile = buildTile(canvas, watermark);
       if (tile) {
         tiles.push(tile);
-        totalHeight += tile.size.height + CONTENT_PADDING;
+        totalHeight += tile.size.height + tile.style.paddingTop + tile.style.paddingBottom;
       }
     }
     if (totalHeight <= 0) {
@@ -1226,19 +1226,15 @@ function drawGroupedWatermarks(canvas, watermarks, groupPosition) {
     }
     const contentPadding = getCanvasScale(canvas, CONTENT_PADDING);
     let baseOrigin = new Point(contentPadding, contentPadding);
-    let titlePadding = 0;
     if (groupPosition === "center" /* Center */) {
       baseOrigin = new Point(
         contentPadding,
         Math.round((canvas.height - totalHeight) / 2)
       );
     } else if (groupPosition === "bottom" /* Bottom */) {
-      tiles.forEach((item) => {
-        titlePadding += item.style.paddingTop + item.style.paddingBottom;
-      });
       baseOrigin = new Point(
         contentPadding,
-        canvas.height - totalHeight - contentPadding - titlePadding
+        canvas.height - totalHeight - contentPadding
       );
     } else if (groupPosition === "top" /* Top */) {
       baseOrigin = new Point(contentPadding, contentPadding);
@@ -1372,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);
@@ -1459,13 +1456,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 {
@@ -1479,12 +1477,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, {
@@ -1496,7 +1497,13 @@ 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,
@@ -1506,6 +1513,21 @@ var ImageProcessor = class {
       );
     });
   }
+  /**
+   * 根据 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) {
     return canvas2File(canvas, filename, lastModified, type, quality).then(
       (file) => {

package/dist/index.esm.mjs

@@ -1191,7 +1191,7 @@ function drawGroupedWatermarks(canvas, watermarks, groupPosition) {
       const tile = buildTile(canvas, watermark);
       if (tile) {
         tiles.push(tile);
-        totalHeight += tile.size.height + CONTENT_PADDING;
+        totalHeight += tile.size.height + tile.style.paddingTop + tile.style.paddingBottom;
       }
     }
     if (totalHeight <= 0) {
@@ -1201,19 +1201,15 @@ function drawGroupedWatermarks(canvas, watermarks, groupPosition) {
     }
     const contentPadding = getCanvasScale(canvas, CONTENT_PADDING);
     let baseOrigin = new Point(contentPadding, contentPadding);
-    let titlePadding = 0;
     if (groupPosition === "center" /* Center */) {
       baseOrigin = new Point(
         contentPadding,
         Math.round((canvas.height - totalHeight) / 2)
       );
     } else if (groupPosition === "bottom" /* Bottom */) {
-      tiles.forEach((item) => {
-        titlePadding += item.style.paddingTop + item.style.paddingBottom;
-      });
       baseOrigin = new Point(
         contentPadding,
-        canvas.height - totalHeight - contentPadding - titlePadding
+        canvas.height - totalHeight - contentPadding
       );
     } else if (groupPosition === "top" /* Top */) {
       baseOrigin = new Point(contentPadding, contentPadding);
@@ -1347,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);
@@ -1434,13 +1431,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 {
@@ -1454,12 +1452,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, {
@@ -1471,7 +1472,13 @@ 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,
@@ -1481,6 +1488,21 @@ var ImageProcessor = class {
       );
     });
   }
+  /**
+   * 根据 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) {
     return canvas2File(canvas, filename, lastModified, type, quality).then(
       (file) => {

package/package.json

@@ -1,23 +1,10 @@
 {
   "name": "@egova-mobile/app-media-utils",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "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"
   }
-}
+}