@tradly/asset 1.0.9 → 1.0.11
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.
|
@@ -20,19 +20,18 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
|
|
|
20
20
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
21
21
|
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } // Helper: compress image on the client before upload
|
|
22
22
|
// - Downscale to fit within maxWidth/maxHeight.
|
|
23
|
-
// - Convert
|
|
23
|
+
// - Convert raster images (JPEG/PNG, etc.) to WebP for better compression.
|
|
24
24
|
// - Skip SVG (vector) to avoid degradation.
|
|
25
25
|
var compressImage = function compressImage(file) {
|
|
26
26
|
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
27
27
|
_ref$maxWidth = _ref.maxWidth,
|
|
28
|
-
maxWidth = _ref$maxWidth === void 0 ?
|
|
28
|
+
maxWidth = _ref$maxWidth === void 0 ? 1600 : _ref$maxWidth,
|
|
29
29
|
_ref$maxHeight = _ref.maxHeight,
|
|
30
|
-
maxHeight = _ref$maxHeight === void 0 ?
|
|
30
|
+
maxHeight = _ref$maxHeight === void 0 ? 1600 : _ref$maxHeight,
|
|
31
31
|
_ref$quality = _ref.quality,
|
|
32
|
-
quality = _ref$quality === void 0 ?
|
|
33
|
-
_ref$
|
|
34
|
-
|
|
35
|
-
console.log("compressImage", file, maxWidth, maxHeight, quality, convertPngToJpeg);
|
|
32
|
+
quality = _ref$quality === void 0 ? 1 : _ref$quality,
|
|
33
|
+
_ref$convertToWebp = _ref.convertToWebp,
|
|
34
|
+
convertToWebp = _ref$convertToWebp === void 0 ? true : _ref$convertToWebp;
|
|
36
35
|
return new Promise(function (resolve) {
|
|
37
36
|
// Non-image or SVG: skip compression to avoid losing vector quality
|
|
38
37
|
if (!file.type.startsWith("image/") || file.type === "image/svg+xml") {
|
|
@@ -62,8 +61,10 @@ var compressImage = function compressImage(file) {
|
|
|
62
61
|
}
|
|
63
62
|
ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
|
|
64
63
|
|
|
65
|
-
//
|
|
66
|
-
|
|
64
|
+
// Prefer WebP for raster images to reduce size (where supported)
|
|
65
|
+
// Keep original type for GIF to avoid breaking animation.
|
|
66
|
+
var isRaster = file.type === "image/jpeg" || file.type === "image/jpg" || file.type === "image/png" || file.type === "image/webp" || file.type === "image/heic" || file.type === "image/heif";
|
|
67
|
+
var targetType = convertToWebp && isRaster && file.type !== "image/gif" ? "image/webp" : file.type;
|
|
67
68
|
canvas.toBlob(function (blob) {
|
|
68
69
|
if (!blob) {
|
|
69
70
|
resolve(file);
|
|
@@ -137,9 +138,9 @@ var FileUpload = function FileUpload(_ref2) {
|
|
|
137
138
|
_context.n = 2;
|
|
138
139
|
return Promise.all(fileList.map(function (file) {
|
|
139
140
|
return compressImage(file, {
|
|
140
|
-
maxWidth:
|
|
141
|
-
maxHeight:
|
|
142
|
-
quality:
|
|
141
|
+
maxWidth: 1600,
|
|
142
|
+
maxHeight: 1600,
|
|
143
|
+
quality: 1
|
|
143
144
|
});
|
|
144
145
|
}));
|
|
145
146
|
case 2:
|
|
@@ -13,20 +13,19 @@ import { CameraIcon } from "./Icons";
|
|
|
13
13
|
|
|
14
14
|
// Helper: compress image on the client before upload
|
|
15
15
|
// - Downscale to fit within maxWidth/maxHeight.
|
|
16
|
-
// - Convert
|
|
16
|
+
// - Convert raster images (JPEG/PNG, etc.) to WebP for better compression.
|
|
17
17
|
// - Skip SVG (vector) to avoid degradation.
|
|
18
18
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
19
19
|
var compressImage = function compressImage(file) {
|
|
20
20
|
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
21
21
|
_ref$maxWidth = _ref.maxWidth,
|
|
22
|
-
maxWidth = _ref$maxWidth === void 0 ?
|
|
22
|
+
maxWidth = _ref$maxWidth === void 0 ? 1600 : _ref$maxWidth,
|
|
23
23
|
_ref$maxHeight = _ref.maxHeight,
|
|
24
|
-
maxHeight = _ref$maxHeight === void 0 ?
|
|
24
|
+
maxHeight = _ref$maxHeight === void 0 ? 1600 : _ref$maxHeight,
|
|
25
25
|
_ref$quality = _ref.quality,
|
|
26
|
-
quality = _ref$quality === void 0 ?
|
|
27
|
-
_ref$
|
|
28
|
-
|
|
29
|
-
console.log("compressImage", file, maxWidth, maxHeight, quality, convertPngToJpeg);
|
|
26
|
+
quality = _ref$quality === void 0 ? 1 : _ref$quality,
|
|
27
|
+
_ref$convertToWebp = _ref.convertToWebp,
|
|
28
|
+
convertToWebp = _ref$convertToWebp === void 0 ? true : _ref$convertToWebp;
|
|
30
29
|
return new Promise(function (resolve) {
|
|
31
30
|
// Non-image or SVG: skip compression to avoid losing vector quality
|
|
32
31
|
if (!file.type.startsWith("image/") || file.type === "image/svg+xml") {
|
|
@@ -56,8 +55,10 @@ var compressImage = function compressImage(file) {
|
|
|
56
55
|
}
|
|
57
56
|
ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
|
|
58
57
|
|
|
59
|
-
//
|
|
60
|
-
|
|
58
|
+
// Prefer WebP for raster images to reduce size (where supported)
|
|
59
|
+
// Keep original type for GIF to avoid breaking animation.
|
|
60
|
+
var isRaster = file.type === "image/jpeg" || file.type === "image/jpg" || file.type === "image/png" || file.type === "image/webp" || file.type === "image/heic" || file.type === "image/heif";
|
|
61
|
+
var targetType = convertToWebp && isRaster && file.type !== "image/gif" ? "image/webp" : file.type;
|
|
61
62
|
canvas.toBlob(function (blob) {
|
|
62
63
|
if (!blob) {
|
|
63
64
|
resolve(file);
|
|
@@ -131,9 +132,9 @@ var FileUpload = function FileUpload(_ref2) {
|
|
|
131
132
|
_context.n = 2;
|
|
132
133
|
return Promise.all(fileList.map(function (file) {
|
|
133
134
|
return compressImage(file, {
|
|
134
|
-
maxWidth:
|
|
135
|
-
maxHeight:
|
|
136
|
-
quality:
|
|
135
|
+
maxWidth: 1600,
|
|
136
|
+
maxHeight: 1600,
|
|
137
|
+
quality: 1
|
|
137
138
|
});
|
|
138
139
|
}));
|
|
139
140
|
case 2:
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tradly/asset",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.11",
|
|
4
4
|
"description": "A reusable media gallery component for uploading and selecting images, videos, and files with Tradly authentication",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|