@onyx-p/imlib-web 2.5.3 → 2.5.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.esm.js +24 -39
- package/index.umd.js +24 -39
- package/package.json +1 -1
package/index.esm.js
CHANGED
@@ -28630,6 +28630,8 @@ const getThumbnail = (img, thumbnailConfig) => {
|
|
28630
28630
|
const pos = calcPosition(img.width, img.height, thumbnailConfig);
|
28631
28631
|
canvas.width = pos.w > thumbnailConfig.maxWidth ? thumbnailConfig.maxWidth : pos.w;
|
28632
28632
|
canvas.height = pos.h > thumbnailConfig.maxHeight ? thumbnailConfig.maxHeight : pos.h;
|
28633
|
+
context.fillStyle = '#FFFFFF';
|
28634
|
+
context.fillRect(0, 0, canvas.width, canvas.height);
|
28633
28635
|
context?.drawImage(img, pos.x, pos.y, pos.w, pos.h);
|
28634
28636
|
try {
|
28635
28637
|
let base64 = canvas.toDataURL('image/jpeg', thumbnailConfig.quality);
|
@@ -28639,50 +28641,33 @@ const getThumbnail = (img, thumbnailConfig) => {
|
|
28639
28641
|
}
|
28640
28642
|
};
|
28641
28643
|
function calcPosition(width, height, thumbnailConfig) {
|
28642
|
-
|
28643
|
-
|
28644
|
-
let zoom;
|
28644
|
+
let w = width;
|
28645
|
+
let h = height;
|
28645
28646
|
let x = 0;
|
28646
28647
|
let y = 0;
|
28647
|
-
|
28648
|
-
|
28649
|
-
|
28650
|
-
|
28651
|
-
|
28652
|
-
w = 100;
|
28653
|
-
h = height / zoom;
|
28654
|
-
y = (h - thumbnailConfig.maxHeight) / 2;
|
28655
|
-
} else {
|
28656
|
-
zoom = height / 100;
|
28657
|
-
h = 100;
|
28658
|
-
w = width / zoom;
|
28659
|
-
x = (w - thumbnailConfig.maxWidth) / 2;
|
28660
|
-
}
|
28648
|
+
const originalArea = width * height;
|
28649
|
+
const targetArea = thumbnailConfig.maxWidth * thumbnailConfig.maxHeight;
|
28650
|
+
if (originalArea <= targetArea) {
|
28651
|
+
x = (thumbnailConfig.maxWidth - w) / 2;
|
28652
|
+
y = (thumbnailConfig.maxHeight - h) / 2;
|
28661
28653
|
return {
|
28662
|
-
w
|
28663
|
-
h
|
28664
|
-
x
|
28665
|
-
y
|
28666
|
-
};
|
28667
|
-
};
|
28668
|
-
const ltScale = function () {
|
28669
|
-
if (isheight) {
|
28670
|
-
zoom = height / thumbnailConfig.maxHeight;
|
28671
|
-
h = thumbnailConfig.maxHeight;
|
28672
|
-
w = width / zoom;
|
28673
|
-
} else {
|
28674
|
-
zoom = width / thumbnailConfig.maxWidth;
|
28675
|
-
w = thumbnailConfig.maxWidth;
|
28676
|
-
h = height / zoom;
|
28677
|
-
}
|
28678
|
-
return {
|
28679
|
-
w: w,
|
28680
|
-
h: h,
|
28681
|
-
x: -x,
|
28682
|
-
y: -y
|
28654
|
+
w,
|
28655
|
+
h,
|
28656
|
+
x,
|
28657
|
+
y
|
28683
28658
|
};
|
28659
|
+
}
|
28660
|
+
const ratio = Math.sqrt(targetArea / originalArea);
|
28661
|
+
w = width * ratio;
|
28662
|
+
h = height * ratio;
|
28663
|
+
x = (thumbnailConfig.maxWidth - w) / 2;
|
28664
|
+
y = (thumbnailConfig.maxHeight - h) / 2;
|
28665
|
+
return {
|
28666
|
+
w,
|
28667
|
+
h,
|
28668
|
+
x,
|
28669
|
+
y
|
28684
28670
|
};
|
28685
|
-
return scale > thumbnailConfig.scale ? gtScale() : ltScale();
|
28686
28671
|
}
|
28687
28672
|
|
28688
28673
|
function formatDurationSeconds(timeSeconds) {
|
package/index.umd.js
CHANGED
@@ -28636,6 +28636,8 @@
|
|
28636
28636
|
const pos = calcPosition(img.width, img.height, thumbnailConfig);
|
28637
28637
|
canvas.width = pos.w > thumbnailConfig.maxWidth ? thumbnailConfig.maxWidth : pos.w;
|
28638
28638
|
canvas.height = pos.h > thumbnailConfig.maxHeight ? thumbnailConfig.maxHeight : pos.h;
|
28639
|
+
context.fillStyle = '#FFFFFF';
|
28640
|
+
context.fillRect(0, 0, canvas.width, canvas.height);
|
28639
28641
|
context?.drawImage(img, pos.x, pos.y, pos.w, pos.h);
|
28640
28642
|
try {
|
28641
28643
|
let base64 = canvas.toDataURL('image/jpeg', thumbnailConfig.quality);
|
@@ -28645,50 +28647,33 @@
|
|
28645
28647
|
}
|
28646
28648
|
};
|
28647
28649
|
function calcPosition(width, height, thumbnailConfig) {
|
28648
|
-
|
28649
|
-
|
28650
|
-
let zoom;
|
28650
|
+
let w = width;
|
28651
|
+
let h = height;
|
28651
28652
|
let x = 0;
|
28652
28653
|
let y = 0;
|
28653
|
-
|
28654
|
-
|
28655
|
-
|
28656
|
-
|
28657
|
-
|
28658
|
-
w = 100;
|
28659
|
-
h = height / zoom;
|
28660
|
-
y = (h - thumbnailConfig.maxHeight) / 2;
|
28661
|
-
} else {
|
28662
|
-
zoom = height / 100;
|
28663
|
-
h = 100;
|
28664
|
-
w = width / zoom;
|
28665
|
-
x = (w - thumbnailConfig.maxWidth) / 2;
|
28666
|
-
}
|
28654
|
+
const originalArea = width * height;
|
28655
|
+
const targetArea = thumbnailConfig.maxWidth * thumbnailConfig.maxHeight;
|
28656
|
+
if (originalArea <= targetArea) {
|
28657
|
+
x = (thumbnailConfig.maxWidth - w) / 2;
|
28658
|
+
y = (thumbnailConfig.maxHeight - h) / 2;
|
28667
28659
|
return {
|
28668
|
-
w
|
28669
|
-
h
|
28670
|
-
x
|
28671
|
-
y
|
28672
|
-
};
|
28673
|
-
};
|
28674
|
-
const ltScale = function () {
|
28675
|
-
if (isheight) {
|
28676
|
-
zoom = height / thumbnailConfig.maxHeight;
|
28677
|
-
h = thumbnailConfig.maxHeight;
|
28678
|
-
w = width / zoom;
|
28679
|
-
} else {
|
28680
|
-
zoom = width / thumbnailConfig.maxWidth;
|
28681
|
-
w = thumbnailConfig.maxWidth;
|
28682
|
-
h = height / zoom;
|
28683
|
-
}
|
28684
|
-
return {
|
28685
|
-
w: w,
|
28686
|
-
h: h,
|
28687
|
-
x: -x,
|
28688
|
-
y: -y
|
28660
|
+
w,
|
28661
|
+
h,
|
28662
|
+
x,
|
28663
|
+
y
|
28689
28664
|
};
|
28665
|
+
}
|
28666
|
+
const ratio = Math.sqrt(targetArea / originalArea);
|
28667
|
+
w = width * ratio;
|
28668
|
+
h = height * ratio;
|
28669
|
+
x = (thumbnailConfig.maxWidth - w) / 2;
|
28670
|
+
y = (thumbnailConfig.maxHeight - h) / 2;
|
28671
|
+
return {
|
28672
|
+
w,
|
28673
|
+
h,
|
28674
|
+
x,
|
28675
|
+
y
|
28690
28676
|
};
|
28691
|
-
return scale > thumbnailConfig.scale ? gtScale() : ltScale();
|
28692
28677
|
}
|
28693
28678
|
|
28694
28679
|
function formatDurationSeconds(timeSeconds) {
|