Files
klz-cables.com/.pnpm-store/v10/files/91/b6af7255aadd8afaaaa11a2c04fd4ecf3d19669a4f41c369a433cc249ae29f3fbb2c4d2ad015d293223ccd3be29ade032c7a378947cb6daf19732eab5cfab6
Marc Mintel 5397309103
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 20s
Build & Deploy / 🧪 QA (push) Failing after 34s
Build & Deploy / 🏗️ Build (push) Has started running
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Smoke Test (push) Has been cancelled
Build & Deploy / ⚡ Lighthouse (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
fix(products): fix breadcrumbs and product filtering (backport from main)
2026-02-24 16:04:21 +01:00

52 lines
2.1 KiB
Plaintext

/**
* Create a thumbnail from a File object by drawing it onto an OffscreenCanvas
*/export const createThumbnail = file => {
return new Promise((resolve, reject) => {
const img = new Image();
img.src = URL.createObjectURL(file); // Use Object URL directly
img.onload = () => {
const maxDimension = 280;
let drawHeight, drawWidth;
// Calculate aspect ratio
const aspectRatio = img.width / img.height;
// Determine dimensions to fit within maxDimension while maintaining aspect ratio
if (aspectRatio > 1) {
// Image is wider than tall
drawWidth = maxDimension;
drawHeight = maxDimension / aspectRatio;
} else {
// Image is taller than wide, or square
drawWidth = maxDimension * aspectRatio;
drawHeight = maxDimension;
}
const canvas = new OffscreenCanvas(drawWidth, drawHeight) // Create an OffscreenCanvas
;
const ctx = canvas.getContext('2d');
// Determine output format based on input file type
const outputFormat = file.type === 'image/png' ? 'image/png' : 'image/jpeg';
const quality = file.type === 'image/png' ? undefined : 0.8 // PNG doesn't use quality, use higher quality for JPEG
;
// Draw the image onto the OffscreenCanvas with calculated dimensions
ctx.drawImage(img, 0, 0, drawWidth, drawHeight);
// Convert the OffscreenCanvas to a Blob and free up memory
canvas.convertToBlob({
type: outputFormat,
...(quality && {
quality
})
}).then(blob => {
URL.revokeObjectURL(img.src); // Release the Object URL
const reader = new FileReader();
reader.onload = () => resolve(reader.result); // Resolve as data URL
reader.onerror = reject;
reader.readAsDataURL(blob);
}).catch(reject);
};
img.onerror = error => {
URL.revokeObjectURL(img.src); // Release Object URL on error
// eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
reject(error);
};
});
};
//# sourceMappingURL=createThumbnail.js.map