feat: add pixel limit

Author: quarksb

demo/index.ts

@@ -8,6 +8,7 @@ const defaultConfig: CompressOptions = {
     quality: 0.9,
     fileSizeLimit: 30,
     lenSizeLimit: 8192,
+    pixelSizeLimit: 1 << 26,
 };
 
 // 添加一个图片上传按钮
@@ -19,7 +20,8 @@ input.multiple = true;
 pane.addBinding(defaultConfig, "useWebp", { label: "useWebp" });
 pane.addBinding(defaultConfig, "quality", { label: "quality", min: 0, max: 1 });
 pane.addBinding(defaultConfig, "fileSizeLimit", { label: "fileSizeLimit", min: 1, max: 100 });
-pane.addBinding(defaultConfig, "lenSizeLimit", { label: "lenSizeLimit", min: 1000, max: 16383 });
+pane.addBinding(defaultConfig, "lenSizeLimit", { label: "lenSizeLimit", min: 1000, max: (1 << 14) - 1 });
+pane.addBinding(defaultConfig, "pixelSizeLimit", { label: "pixelSizeLimit", min: 1 << 20, max: 1 << 28 });
 pane.addButton({ title: "upload for compress" }).on("click", () => {
     input.click();
 });
@@ -40,7 +42,7 @@ input.onchange = async (): Promise<void> => {
 
         files.forEach(async (file, i) => {
             const { size: beforeSize, name } = file;
-            
+
             const blob = await CEngine.runCompress(file, defaultConfig);
 
             const afterSize = blob.size;
@@ -77,7 +79,7 @@ function preDownloadForBlobs(blob: Blob, i = 0): void {
     const a = document.createElement("a");
     a.href = url;
     a.download = `compressed-${i + 1}.${blob.type.split("/")[1]}`;
-    a.textContent = `d-${i + 1}`;
+    a.textContent = `d-${i + 1}-${blob.size >> 10}kb`;
 
     const div = document.createElement("div");
     const img = document.createElement("img");

package.json

@@ -1,7 +1,7 @@
 {
   "name": "zhiwen-img-compress",
   "private": false,
-  "version": "0.1.0",
+  "version": "0.2.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,8 +17,8 @@
     "@tweakpane/core": "^2.0.5",
     "gh-pages": "^6.2.0",
     "tweakpane": "^4.0.5",
-    "typescript": "^5.7.0",
-    "vite": "^6.0.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3",
     "vite-plugin-dts": "^4.3.0"
   },
   "files": [

src/compress.ts

@@ -17,11 +17,17 @@ export interface CompressOptions {
     fileSizeLimit?: number;
 
     /**
-     * 图片尺寸限制，单位 px，不应超过浏览器上限 16383
-     * @default 8192
+     * 图片尺寸限制，单位 px，不应超过浏览器上限 32767
+     * @default 8196
      */
     lenSizeLimit?: number;
 
+    /**
+     * 像素限制
+     * @default 268,435,456
+     */
+    pixelSizeLimit?: number;
+
     /**
      * 压缩质量
      * @default 0.9
@@ -38,10 +44,14 @@ export interface CompressOptions {
 const canvas = new OffscreenCanvas(1, 1);
 export async function compressImg(originBlob: Blob, options?: CompressOptions): Promise<Blob> {
     const { type: originType, size: originSize } = originBlob;
+    const { quality = 0.9, lenSizeLimit = 1 << 13, pixelSizeLimit = 1 << 26, fileSizeLimit = 30, useWebp = true } = options || {};
+
     const bitmap = await createImageBitmap(originBlob);
     // originBlob = null as any;
     const { width, height } = bitmap;
-    const { quality = 0.9, lenSizeLimit = 8192, fileSizeLimit = 30, useWebp = true } = options || {};
+
+    const needCompress = originSize > fileSizeLimit << 20 || width * height > pixelSizeLimit || width > lenSizeLimit || height > lenSizeLimit;
+    if (!needCompress) return originBlob;
 
     const type = useWebp ? "image/webp" : "image/jpeg";
     /**max size 最大文件体积 */
@@ -50,10 +60,12 @@ export async function compressImg(originBlob: Blob, options?: CompressOptions):
 
     /**max len 最大尺寸 */
     const mLen = Math.min(lenSizeLimit, MaxLen);
+
+    const mArea = Math.min(pixelSizeLimit, MaxArea);
     // jpg 直接缩放尺寸
     let scale = originType === "image/jpeg" ? Math.sqrt(mSize / originSize) : 1;
-    if (area * scale * scale > MaxArea || width * scale > mLen || height * scale > mLen) {
-        scale = Math.min(Math.sqrt(MaxArea / area), mLen / width, mLen / height);
+    if (area * scale * scale > mArea || width * scale > mLen || height * scale > mLen) {
+        scale = Math.min(Math.sqrt(mArea / area), mLen / width, mLen / height);
     }
 
     let blob: Blob | null = null;

src/index.ts

@@ -7,7 +7,7 @@ class WorkerPool {
     queue: { file: Blob; options?: CompressOptions; resolve: (value: Blob | PromiseLike<Blob>) => void }[];
     timer?: number;
 
-    constructor(size: number) {
+    constructor (size: number) {
         this.size = size;
         this.queue = [];
     }
@@ -45,11 +45,7 @@ class WorkerPool {
         if (!file.type.startsWith("image/")) {
             throw new Error("only image support");
         }
-        const { fileSizeLimit: FileSizeLimit = 30 } = options || {};
-        // 小于 30Mb 的图片不压缩
-        if (file.size <= FileSizeLimit << 20) {
-            return file;
-        }
+
         const promise = new Promise<Blob>((resolve, reject) => {
             // 线程不够用，将任务放入队列
             if (workers.length <= 0) {