sprintify-ui 0.11.28 → 0.11.29

package/dist/types/utils/index.d.ts

@@ -1,8 +1,9 @@
 import toHumanList from './toHumanList';
 import fileSizeFormat from './fileSizeFormat';
 import resizeImageFromURI from './resizeImageFromURI';
+import resizeImageForUpload from './resizeImageForUpload';
 import { disableScroll, enableScroll } from './scrollPreventer';
 import { blobToBase64, validateBase64, base64ToBlob } from './blob';
 import { getColorConfig } from './colors';
 import { getInitials, getAvatarColor } from './avatar';
-export { toHumanList, fileSizeFormat, disableScroll, enableScroll, resizeImageFromURI, blobToBase64, validateBase64, base64ToBlob, getColorConfig, getInitials, getAvatarColor, };
+export { toHumanList, fileSizeFormat, disableScroll, enableScroll, resizeImageFromURI, resizeImageForUpload, blobToBase64, validateBase64, base64ToBlob, getColorConfig, getInitials, getAvatarColor, };

package/dist/types/utils/resizeImageForUpload.d.ts

@@ -0,0 +1,7 @@
+type ResizeImageForUploadOptions = {
+    maxBytes: number;
+    outputMimeType?: string;
+    quality?: number;
+};
+export default function resizeImageForUpload(file: Blob, options: ResizeImageForUploadOptions): Promise<Blob>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.11.28",
+  "version": "0.11.29",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",

package/src/components/BaseFileUploader.vue

@@ -35,7 +35,7 @@ import { UploadedFile } from '@/types/UploadedFile';
 import { useSnackbarsStore } from '@/stores/snackbars';
 import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
 import { BaseCropperConfig } from '@/types';
-import { base64ToBlob, blobToBase64, resizeImageFromURI } from '@/utils';
+import { resizeImageForUpload } from '@/utils';
 import BaseFilePicker from './BaseFilePicker.vue';
 import BaseFilePickerCrop from './BaseFilePickerCrop.vue';
 import { t } from '@/i18n';
@@ -220,49 +220,21 @@ async function autoResizeImage(file: File): Promise<File> {
   }
 
   try {
-    const source = await blobToBase64(file);
-    const dimensions = await getImageDimensions(source);
-
-    const resizeRatio = Math.sqrt(props.maxImageSizeBeforeResize / file.size);
-
-    let targetWidth = Math.max(1, Math.floor(dimensions.width * resizeRatio));
-    let targetHeight = Math.max(1, Math.floor(dimensions.height * resizeRatio));
-
-    let resizedBlob = await createResizedBlob(
-      source,
-      targetHeight,
-      targetWidth,
-      file.type
-    );
-
-    let attempts = 0;
-
-    while (
-      resizedBlob.size > props.maxImageSizeBeforeResize &&
-      attempts < 5 &&
-      targetWidth > 1 &&
-      targetHeight > 1
-    ) {
-      targetWidth = Math.max(1, Math.floor(targetWidth * 0.8));
-      targetHeight = Math.max(1, Math.floor(targetHeight * 0.8));
-      resizedBlob = await createResizedBlob(
-        source,
-        targetHeight,
-        targetWidth,
-        file.type
-      );
-      attempts++;
-    }
+    const resizedBlob = await resizeImageForUpload(file, {
+      maxBytes: props.maxImageSizeBeforeResize,
+    });
 
     if (resizedBlob.size >= file.size) {
       return file;
     }
 
+    const mimeType = resizedBlob.type || file.type;
+
     return new File(
       [resizedBlob],
-      getResizedFileName(file.name, resizedBlob.type),
+      getResizedFileName(file.name, mimeType),
       {
-        type: resizedBlob.type || file.type,
+        type: mimeType,
         lastModified: file.lastModified,
       }
     );
@@ -272,34 +244,6 @@ async function autoResizeImage(file: File): Promise<File> {
   }
 }
 
-async function createResizedBlob(
-  source: string,
-  height: number,
-  width: number,
-  mimeType: string
-): Promise<Blob> {
-  const resizedSource = await resizeImageFromURI(source, height, width);
-  return await base64ToBlob(resizedSource, `data:${mimeType}`);
-}
-
-async function getImageDimensions(
-  source: string
-): Promise<{ width: number; height: number }> {
-  return await new Promise((resolve, reject) => {
-    const image = new Image();
-    image.onload = () => {
-      resolve({
-        width: image.width,
-        height: image.height,
-      });
-    };
-    image.onerror = () => {
-      reject(new Error('Failed to load image dimensions'));
-    };
-    image.src = source;
-  });
-}
-
 function getResizedFileName(filename: string, mimeType: string): string {
   if (mimeType != 'image/jpeg') {
     return filename;

package/src/utils/index.ts

@@ -1,6 +1,7 @@
 import toHumanList from './toHumanList';
 import fileSizeFormat from './fileSizeFormat';
 import resizeImageFromURI from './resizeImageFromURI';
+import resizeImageForUpload from './resizeImageForUpload';
 import { disableScroll, enableScroll } from './scrollPreventer';
 import { blobToBase64, validateBase64, base64ToBlob } from './blob';
 import { getColorConfig } from './colors';
@@ -12,6 +13,7 @@ export {
   disableScroll,
   enableScroll,
   resizeImageFromURI,
+  resizeImageForUpload,
   blobToBase64,
   validateBase64,
   base64ToBlob,

package/src/utils/resizeImageForUpload.ts

@@ -0,0 +1,181 @@
+type ResizeImageForUploadOptions = {
+  maxBytes: number;
+  outputMimeType?: string;
+  quality?: number;
+};
+
+type DecodedImage = {
+  source: CanvasImageSource;
+  width: number;
+  height: number;
+  cleanup: () => void;
+};
+
+const DEFAULT_OUTPUT_QUALITY = 0.9;
+
+export default async function resizeImageForUpload(
+  file: Blob,
+  options: ResizeImageForUploadOptions
+): Promise<Blob> {
+  if (options.maxBytes <= 0 || file.size <= options.maxBytes) {
+    return file;
+  }
+
+  const decodedImage = await decodeImage(file);
+  const outputMimeType =
+    options.outputMimeType ?? getOutputMimeType((file as File).type);
+  const quality = clamp(options.quality ?? DEFAULT_OUTPUT_QUALITY, 0.1, 1);
+
+  let canvas: HTMLCanvasElement | null = null;
+
+  try {
+    const resizeRatio = Math.min(1, Math.sqrt(options.maxBytes / file.size));
+    const targetWidth = Math.max(1, Math.floor(decodedImage.width * resizeRatio));
+    const targetHeight = Math.max(
+      1,
+      Math.floor(decodedImage.height * resizeRatio)
+    );
+
+    canvas = createScaledCanvas(
+      decodedImage.source,
+      decodedImage.width,
+      decodedImage.height,
+      targetWidth,
+      targetHeight
+    );
+
+    if (!supportsQualityEncoding(outputMimeType)) {
+      return await canvasToBlob(canvas, outputMimeType);
+    }
+
+    return await canvasToBlob(canvas, outputMimeType, quality);
+  } finally {
+    decodedImage.cleanup();
+
+    if (canvas) {
+      releaseCanvas(canvas);
+    }
+  }
+}
+
+function getOutputMimeType(inputMimeType: string): string {
+  if (inputMimeType === 'image/webp') {
+    return 'image/webp';
+  }
+
+  return 'image/jpeg';
+}
+
+async function decodeImage(file: Blob): Promise<DecodedImage> {
+  if (typeof createImageBitmap === 'function') {
+    try {
+      const bitmap = await createImageBitmap(file);
+
+      return {
+        source: bitmap,
+        width: bitmap.width,
+        height: bitmap.height,
+        cleanup: () => bitmap.close(),
+      };
+    } catch {
+      // Fallback to Image decode when createImageBitmap is not supported.
+    }
+  }
+
+  const objectUrl = URL.createObjectURL(file);
+
+  try {
+    const image = await loadImage(objectUrl);
+
+    return {
+      source: image,
+      width: image.naturalWidth || image.width,
+      height: image.naturalHeight || image.height,
+      cleanup: () => URL.revokeObjectURL(objectUrl),
+    };
+  } catch (error) {
+    URL.revokeObjectURL(objectUrl);
+    throw error;
+  }
+}
+
+async function loadImage(src: string): Promise<HTMLImageElement> {
+  const image = new Image();
+  image.decoding = 'async';
+  image.src = src;
+
+  if (typeof image.decode === 'function') {
+    try {
+      await image.decode();
+      return image;
+    } catch {
+      // decode() may reject if called before enough data is available.
+    }
+  }
+
+  return await new Promise((resolve, reject) => {
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error('Failed to decode image'));
+  });
+}
+
+function createScaledCanvas(
+  source: CanvasImageSource,
+  sourceWidth: number,
+  sourceHeight: number,
+  width: number,
+  height: number
+): HTMLCanvasElement {
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+
+  const context = canvas.getContext('2d', {
+    alpha: false,
+    desynchronized: true,
+  });
+
+  if (!context) {
+    throw new Error('Could not acquire context 2d');
+  }
+
+  context.imageSmoothingEnabled = true;
+  context.imageSmoothingQuality = 'high';
+  context.drawImage(source, 0, 0, sourceWidth, sourceHeight, 0, 0, width, height);
+
+  return canvas;
+}
+
+function supportsQualityEncoding(mimeType: string): boolean {
+  return mimeType === 'image/jpeg' || mimeType === 'image/webp';
+}
+
+async function canvasToBlob(
+  canvas: HTMLCanvasElement,
+  mimeType: string,
+  quality?: number
+): Promise<Blob> {
+  return await new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (blob) {
+          resolve(blob);
+          return;
+        }
+
+        reject(new Error('Could not create resized image blob'));
+      },
+      mimeType,
+      quality
+    );
+  });
+}
+
+function releaseCanvas(canvas: HTMLCanvasElement) {
+  canvas.width = 0;
+  canvas.height = 0;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}