@onyx-p/imlib-web 2.5.3 → 2.5.4

package/index.esm.js

@@ -28630,6 +28630,8 @@ const getThumbnail = (img, thumbnailConfig) => {
   const pos = calcPosition(img.width, img.height, thumbnailConfig);
   canvas.width = pos.w > thumbnailConfig.maxWidth ? thumbnailConfig.maxWidth : pos.w;
   canvas.height = pos.h > thumbnailConfig.maxHeight ? thumbnailConfig.maxHeight : pos.h;
+  context.fillStyle = '#FFFFFF';
+  context.fillRect(0, 0, canvas.width, canvas.height);
   context?.drawImage(img, pos.x, pos.y, pos.w, pos.h);
   try {
     let base64 = canvas.toDataURL('image/jpeg', thumbnailConfig.quality);
@@ -28639,50 +28641,33 @@ const getThumbnail = (img, thumbnailConfig) => {
   }
 };
 function calcPosition(width, height, thumbnailConfig) {
-  const isheight = width < height;
-  const scale = isheight ? height / width : width / height;
-  let zoom;
+  let w = width;
+  let h = height;
   let x = 0;
   let y = 0;
-  let w;
-  let h;
-  const gtScale = function () {
-    if (isheight) {
-      zoom = width / 100;
-      w = 100;
-      h = height / zoom;
-      y = (h - thumbnailConfig.maxHeight) / 2;
-    } else {
-      zoom = height / 100;
-      h = 100;
-      w = width / zoom;
-      x = (w - thumbnailConfig.maxWidth) / 2;
-    }
+  const originalArea = width * height;
+  const targetArea = thumbnailConfig.maxWidth * thumbnailConfig.maxHeight;
+  if (originalArea <= targetArea) {
+    x = (thumbnailConfig.maxWidth - w) / 2;
+    y = (thumbnailConfig.maxHeight - h) / 2;
     return {
-      w: w,
-      h: h,
-      x: -x,
-      y: -y
-    };
-  };
-  const ltScale = function () {
-    if (isheight) {
-      zoom = height / thumbnailConfig.maxHeight;
-      h = thumbnailConfig.maxHeight;
-      w = width / zoom;
-    } else {
-      zoom = width / thumbnailConfig.maxWidth;
-      w = thumbnailConfig.maxWidth;
-      h = height / zoom;
-    }
-    return {
-      w: w,
-      h: h,
-      x: -x,
-      y: -y
+      w,
+      h,
+      x,
+      y
     };
+  }
+  const ratio = Math.sqrt(targetArea / originalArea);
+  w = width * ratio;
+  h = height * ratio;
+  x = (thumbnailConfig.maxWidth - w) / 2;
+  y = (thumbnailConfig.maxHeight - h) / 2;
+  return {
+    w,
+    h,
+    x,
+    y
   };
-  return scale > thumbnailConfig.scale ? gtScale() : ltScale();
 }
 
 function formatDurationSeconds(timeSeconds) {

package/index.umd.js

@@ -28636,6 +28636,8 @@
     const pos = calcPosition(img.width, img.height, thumbnailConfig);
     canvas.width = pos.w > thumbnailConfig.maxWidth ? thumbnailConfig.maxWidth : pos.w;
     canvas.height = pos.h > thumbnailConfig.maxHeight ? thumbnailConfig.maxHeight : pos.h;
+    context.fillStyle = '#FFFFFF';
+    context.fillRect(0, 0, canvas.width, canvas.height);
     context?.drawImage(img, pos.x, pos.y, pos.w, pos.h);
     try {
       let base64 = canvas.toDataURL('image/jpeg', thumbnailConfig.quality);
@@ -28645,50 +28647,33 @@
     }
   };
   function calcPosition(width, height, thumbnailConfig) {
-    const isheight = width < height;
-    const scale = isheight ? height / width : width / height;
-    let zoom;
+    let w = width;
+    let h = height;
     let x = 0;
     let y = 0;
-    let w;
-    let h;
-    const gtScale = function () {
-      if (isheight) {
-        zoom = width / 100;
-        w = 100;
-        h = height / zoom;
-        y = (h - thumbnailConfig.maxHeight) / 2;
-      } else {
-        zoom = height / 100;
-        h = 100;
-        w = width / zoom;
-        x = (w - thumbnailConfig.maxWidth) / 2;
-      }
+    const originalArea = width * height;
+    const targetArea = thumbnailConfig.maxWidth * thumbnailConfig.maxHeight;
+    if (originalArea <= targetArea) {
+      x = (thumbnailConfig.maxWidth - w) / 2;
+      y = (thumbnailConfig.maxHeight - h) / 2;
       return {
-        w: w,
-        h: h,
-        x: -x,
-        y: -y
-      };
-    };
-    const ltScale = function () {
-      if (isheight) {
-        zoom = height / thumbnailConfig.maxHeight;
-        h = thumbnailConfig.maxHeight;
-        w = width / zoom;
-      } else {
-        zoom = width / thumbnailConfig.maxWidth;
-        w = thumbnailConfig.maxWidth;
-        h = height / zoom;
-      }
-      return {
-        w: w,
-        h: h,
-        x: -x,
-        y: -y
+        w,
+        h,
+        x,
+        y
       };
+    }
+    const ratio = Math.sqrt(targetArea / originalArea);
+    w = width * ratio;
+    h = height * ratio;
+    x = (thumbnailConfig.maxWidth - w) / 2;
+    y = (thumbnailConfig.maxHeight - h) / 2;
+    return {
+      w,
+      h,
+      x,
+      y
     };
-    return scale > thumbnailConfig.scale ? gtScale() : ltScale();
   }
 
   function formatDurationSeconds(timeSeconds) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onyx-p/imlib-web",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "main": "index.umd.js",
   "module": "index.esm.js",
   "types": "types/index.d.ts",