@jsarmyknife/native--file 1.0.2-beta.0 → 2.0.0-beta.0

package/dist/web.d.ts

@@ -1,3 +1,11 @@
 export declare function convertFileToBase64(file: File): Promise<string>;
 export declare function convertBase64ToFile(base64: string, filename?: string): File;
 export declare function getFileLink(fileInput: HTMLInputElement, fileIndex?: number): string | null;
+export declare function resizeAndCropImage({ rawImage, downsizingTo, targetCrop }: {
+    rawImage: File;
+    downsizingTo?: {
+        height: number;
+        width: number;
+    };
+    targetCrop?: `${number}x${number}`;
+}): Promise<File>;

package/dist/web.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.convertFileToBase64 = convertFileToBase64;
 exports.convertBase64ToFile = convertBase64ToFile;
 exports.getFileLink = getFileLink;
+exports.resizeAndCropImage = resizeAndCropImage;
 function convertFileToBase64(file) {
     return new Promise((resolve, reject) => {
         const reader = new FileReader();
@@ -43,7 +44,7 @@ function getFileLink(fileInput, fileIndex = 0) {
     let blobURL = URL.createObjectURL(fileInput.files[fileIndex]);
     return blobURL;
 }
-async function resizeAndCropImage({ rawImage, downsize, targetAspect }) {
+async function resizeAndCropImage({ rawImage, downsizingTo, targetCrop }) {
     // Create image element from file
     const img = new Image();
     const imageUrl = URL.createObjectURL(rawImage);
@@ -52,35 +53,45 @@ async function resizeAndCropImage({ rawImage, downsize, targetAspect }) {
         img.onerror = reject;
         img.src = imageUrl;
     });
-    // Parse target aspect ratio (e.g., "2x3" -> 2/3)
-    const [aspectWidth, aspectHeight] = targetAspect.split('x').map(Number);
-    const targetRatio = aspectWidth / aspectHeight;
-    // Target dimensions
-    const targetWidth = downsize.width;
-    const targetHeight = downsize.height;
-    // Calculate source image ratio
-    const imgRatio = img.width / img.height;
+    // Step 1: Calculate the dimensions after optional cropping
     let sourceX = 0;
     let sourceY = 0;
     let sourceWidth = img.width;
     let sourceHeight = img.height;
-    // Crop to target ratio (centered crop)
-    if (imgRatio > targetRatio) {
-        // Image is wider - crop width
-        sourceWidth = img.height * targetRatio;
-        sourceX = (img.width - sourceWidth) / 2;
+    if (targetCrop) {
+        // Parse target aspect ratio (e.g., "2x3" -> 2/3)
+        const [aspectWidth, aspectHeight] = targetCrop.split('x').map(Number);
+        const targetRatio = aspectWidth / aspectHeight;
+        const imgRatio = img.width / img.height;
+        // Center crop to target ratio
+        if (imgRatio > targetRatio) {
+            // Image is wider - crop width
+            sourceWidth = img.height * targetRatio;
+            sourceX = (img.width - sourceWidth) / 2;
+        }
+        else if (imgRatio < targetRatio) {
+            // Image is taller - crop height
+            sourceHeight = img.width / targetRatio;
+            sourceY = (img.height - sourceHeight) / 2;
+        }
     }
-    else if (imgRatio < targetRatio) {
-        // Image is taller - crop height
-        sourceHeight = img.width / targetRatio;
-        sourceY = (img.height - sourceHeight) / 2;
+    // Step 2: Calculate canvas dimensions after optional downsizing
+    let canvasWidth = sourceWidth;
+    let canvasHeight = sourceHeight;
+    if (downsizingTo) {
+        // Scale down to fit within bounds while maintaining aspect ratio
+        const scaleX = downsizingTo.width / sourceWidth;
+        const scaleY = downsizingTo.height / sourceHeight;
+        const scale = Math.min(scaleX, scaleY, 1); // Only downsize, never upsize
+        canvasWidth = sourceWidth * scale;
+        canvasHeight = sourceHeight * scale;
     }
-    // Draw cropped and resized image on canvas
+    // Draw image on canvas (no stretching, fills entire canvas)
     const canvas = document.createElement('canvas');
-    canvas.width = targetWidth;
-    canvas.height = targetHeight;
+    canvas.width = canvasWidth;
+    canvas.height = canvasHeight;
     const ctx = canvas.getContext('2d');
-    ctx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, targetWidth, targetHeight);
+    ctx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, canvasWidth, canvasHeight);
     // Clean up
     URL.revokeObjectURL(imageUrl);
     // Convert canvas to blob then to File

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@jsarmyknife/native--file",
-	"version": "1.0.2-beta.0",
+	"version": "2.0.0-beta.0",
 	"public": true,
 	"description": "All Utilities you need for manipulating files.",
 	"main": "dist/index.js",

package/web.ts

@@ -43,14 +43,14 @@ export function getFileLink(fileInput: HTMLInputElement, fileIndex = 0) {
 }
 
 
-async function resizeAndCropImage({
+export async function resizeAndCropImage({
   rawImage,
-  downsize,
-  targetAspect
+  downsizingTo,
+  targetCrop
 }: {
   rawImage: File;
-  downsize: { height: number; width: number };
-  targetAspect: `${number}x${number}`;
+  downsizingTo?: { height: number; width: number };
+  targetCrop?: `${number}x${number}`;
 }): Promise<File> {
   // Create image element from file
   const img = new Image();
@@ -62,43 +62,54 @@ async function resizeAndCropImage({
     img.src = imageUrl;
   });
 
-  // Parse target aspect ratio (e.g., "2x3" -> 2/3)
-  const [aspectWidth, aspectHeight] = targetAspect.split('x').map(Number);
-  const targetRatio = aspectWidth / aspectHeight;
-
-  // Target dimensions
-  const targetWidth = downsize.width;
-  const targetHeight = downsize.height;
-
-  // Calculate source image ratio
-  const imgRatio = img.width / img.height;
-
+  // Step 1: Calculate the dimensions after optional cropping
   let sourceX = 0;
   let sourceY = 0;
   let sourceWidth = img.width;
   let sourceHeight = img.height;
 
-  // Crop to target ratio (centered crop)
-  if (imgRatio > targetRatio) {
-    // Image is wider - crop width
-    sourceWidth = img.height * targetRatio;
-    sourceX = (img.width - sourceWidth) / 2;
-  } else if (imgRatio < targetRatio) {
-    // Image is taller - crop height
-    sourceHeight = img.width / targetRatio;
-    sourceY = (img.height - sourceHeight) / 2;
+  if (targetCrop) {
+    // Parse target aspect ratio (e.g., "2x3" -> 2/3)
+    const [aspectWidth, aspectHeight] = targetCrop.split('x').map(Number);
+    const targetRatio = aspectWidth / aspectHeight;
+    const imgRatio = img.width / img.height;
+
+    // Center crop to target ratio
+    if (imgRatio > targetRatio) {
+      // Image is wider - crop width
+      sourceWidth = img.height * targetRatio;
+      sourceX = (img.width - sourceWidth) / 2;
+    } else if (imgRatio < targetRatio) {
+      // Image is taller - crop height
+      sourceHeight = img.width / targetRatio;
+      sourceY = (img.height - sourceHeight) / 2;
+    }
+  }
+
+  // Step 2: Calculate canvas dimensions after optional downsizing
+  let canvasWidth = sourceWidth;
+  let canvasHeight = sourceHeight;
+
+  if (downsizingTo) {
+    // Scale down to fit within bounds while maintaining aspect ratio
+    const scaleX = downsizingTo.width / sourceWidth;
+    const scaleY = downsizingTo.height / sourceHeight;
+    const scale = Math.min(scaleX, scaleY, 1); // Only downsize, never upsize
+    
+    canvasWidth = sourceWidth * scale;
+    canvasHeight = sourceHeight * scale;
   }
 
-  // Draw cropped and resized image on canvas
+  // Draw image on canvas (no stretching, fills entire canvas)
   const canvas = document.createElement('canvas');
-  canvas.width = targetWidth;
-  canvas.height = targetHeight;
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
   const ctx = canvas.getContext('2d')!;
   
   ctx.drawImage(
     img,
     sourceX, sourceY, sourceWidth, sourceHeight,
-    0, 0, targetWidth, targetHeight
+    0, 0, canvasWidth, canvasHeight
   );
 
   // Clean up