97 lines
3.2 KiB
JavaScript
97 lines
3.2 KiB
JavaScript
|
// @ts-check
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Client-side image resize utility.
|
|||
|
|
*
|
|||
|
|
* Accepts a File/Blob, resizes it to fit within maxSize × maxSize pixels
|
|||
|
|
* (never upscales), and returns a data URI (WebP preferred, JPEG fallback).
|
|||
|
|
*
|
|||
|
|
* Used by the profile page before uploading an avatar image so that
|
|||
|
|
* data URIs stay well within the 512 KiB backend limit.
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
/** Accepted MIME types for avatar uploads. */
|
|||
|
|
const ACCEPTED_TYPES = new Set(['image/png', 'image/webp', 'image/jpeg']);
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Load an image File/Blob as a data URL via FileReader.
|
|||
|
|
* @param {File | Blob} file
|
|||
|
|
* @returns {Promise<string>}
|
|||
|
|
*/
|
|||
|
|
function _readAsDataUrl(file) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
const reader = new FileReader();
|
|||
|
|
reader.onload = () => resolve(/** @type {string} */ (reader.result));
|
|||
|
|
reader.onerror = () => reject(new Error('FileReader failed'));
|
|||
|
|
reader.readAsDataURL(file);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Load a data URL into an HTMLImageElement (waits for `onload`).
|
|||
|
|
* @param {string} src
|
|||
|
|
* @returns {Promise<HTMLImageElement>}
|
|||
|
|
*/
|
|||
|
|
function _loadImage(src) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
const img = new Image();
|
|||
|
|
img.onload = () => resolve(img);
|
|||
|
|
img.onerror = () => reject(new Error('Image failed to load'));
|
|||
|
|
img.src = src;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Convert a canvas to a data URI, preferring WebP at quality 0.85.
|
|||
|
|
* Falls back to JPEG if the browser does not support WebP encoding.
|
|||
|
|
* @param {HTMLCanvasElement} canvas
|
|||
|
|
* @returns {string}
|
|||
|
|
*/
|
|||
|
|
function _canvasToDataUri(canvas) {
|
|||
|
|
const webp = canvas.toDataURL('image/webp', 0.85);
|
|||
|
|
// toDataURL returns a PNG if the MIME type is not supported — detect by prefix
|
|||
|
|
if (webp.startsWith('data:image/webp')) return webp;
|
|||
|
|
return canvas.toDataURL('image/jpeg', 0.85);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Resize an image File to fit within maxSize × maxSize, then return
|
|||
|
|
* a data URI (WebP at quality 0.85, or JPEG as fallback).
|
|||
|
|
*
|
|||
|
|
* - Images already within maxSize × maxSize are not upscaled.
|
|||
|
|
* - Only `image/png`, `image/webp`, and `image/jpeg` are accepted;
|
|||
|
|
* all other MIME types throw an Error.
|
|||
|
|
*
|
|||
|
|
* @param {File} file Image file to resize
|
|||
|
|
* @param {number} [maxSize=512] Maximum width and height in pixels
|
|||
|
|
* @returns {Promise<string>} data URI of the (possibly resized) image
|
|||
|
|
*/
|
|||
|
|
export async function resizeImageToDataUrl(file, maxSize = 104) {
|
|||
|
|
if (!ACCEPTED_TYPES.has(file.type)) {
|
|||
|
|
throw new Error(`Unsupported image type: ${file.type}. Accepted: PNG, WebP, JPEG.`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const dataUrl = await _readAsDataUrl(file);
|
|||
|
|
const img = await _loadImage(dataUrl);
|
|||
|
|
|
|||
|
|
const { naturalWidth: w, naturalHeight: h } = img;
|
|||
|
|
|
|||
|
|
// Compute output dimensions — scale down proportionally if needed, never upscale
|
|||
|
|
let outW = w;
|
|||
|
|
let outH = h;
|
|||
|
|
if (w > maxSize || h > maxSize) {
|
|||
|
|
const ratio = Math.min(maxSize / w, maxSize / h);
|
|||
|
|
outW = Math.round(w * ratio);
|
|||
|
|
outH = Math.round(h * ratio);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const canvas = document.createElement('canvas');
|
|||
|
|
canvas.width = outW;
|
|||
|
|
canvas.height = outH;
|
|||
|
|
const ctx = canvas.getContext('2d');
|
|||
|
|
if (!ctx) throw new Error('Could not get 2D canvas context');
|
|||
|
|
ctx.drawImage(img, 0, 0, outW, outH);
|
|||
|
|
|
|||
|
|
return _canvasToDataUri(canvas);
|
|||
|
|
}
|