@jsarmyknife/native--file 0.0.1-beta.0 → 1.0.3-beta.0

package/dist/index.d.ts

@@ -1 +1 @@
-export * from './web';
+export * from "./web";

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, downsize, targetAspect }: {
+    rawImage: File;
+    downsize: {
+        height: number;
+        width: number;
+    };
+    targetAspect: `${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();
@@ -22,9 +23,8 @@ function convertFileToBase64(file) {
         reader.readAsDataURL(file);
     });
 }
-;
 function convertBase64ToFile(base64, filename = "untitled") {
-    const arr = base64.split(',');
+    const arr = base64.split(",");
     const mime = arr[0].match(/:(.*?);/);
     if (mime == null || mime[1] == undefined) {
         throw new Error("Invalid base64 string");
@@ -44,3 +44,55 @@ function getFileLink(fileInput, fileIndex = 0) {
     let blobURL = URL.createObjectURL(fileInput.files[fileIndex]);
     return blobURL;
 }
+async function resizeAndCropImage({ rawImage, downsize, targetAspect }) {
+    // Create image element from file
+    const img = new Image();
+    const imageUrl = URL.createObjectURL(rawImage);
+    await new Promise((resolve, reject) => {
+        img.onload = () => resolve();
+        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;
+    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;
+    }
+    // Draw cropped and resized image on canvas
+    const canvas = document.createElement('canvas');
+    canvas.width = targetWidth;
+    canvas.height = targetHeight;
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, targetWidth, targetHeight);
+    // Clean up
+    URL.revokeObjectURL(imageUrl);
+    // Convert canvas to blob then to File
+    return new Promise((resolve, reject) => {
+        canvas.toBlob((blob) => {
+            if (!blob) {
+                reject(new Error('Failed to create blob'));
+                return;
+            }
+            const file = new File([blob], rawImage.name, { type: 'image/png' });
+            resolve(file);
+        }, 'image/png');
+    });
+}

package/index.ts

@@ -1 +1 @@
-export * from './web';
+export * from "./web";

package/package.json

@@ -1,22 +1,22 @@
 {
-  "name": "@jsarmyknife/native--file",
-  "version": "0.0.1-beta.0",
-  "public": true,
-  "description": "All Utilities you need for manipulating files.",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "build": "tsc"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/JeroTan/JSArmyKnife.git"
-  },
-  "author": "Jerowe Tan",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/JeroTan/JSArmyKnife/issues"
-  },
-  "homepage": "https://github.com/JeroTan/JSArmyKnife#readme",
-  "keywords": []
+	"name": "@jsarmyknife/native--file",
+	"version": "1.0.3-beta.0",
+	"public": true,
+	"description": "All Utilities you need for manipulating files.",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"scripts": {
+		"build": "tsc"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/JeroTan/JSArmyKnife.git"
+	},
+	"author": "Jerowe Tan",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/JeroTan/JSArmyKnife/issues"
+	},
+	"homepage": "https://github.com/JeroTan/JSArmyKnife#readme",
+	"keywords": []
 }

package/tsconfig.json

@@ -1,7 +1,7 @@
 {
-  "extends": "../../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./dist",
-  },
-  "include": ["index.ts"]
-}
+	"extends": "../../../tsconfig.json",
+	"compilerOptions": {
+		"outDir": "./dist"
+	},
+	"include": ["index.ts"]
+}

package/web.ts

@@ -1,44 +1,118 @@
-
-export function convertFileToBase64(file:File): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => {
-      if(reader.result == null){
-        throw new Error("Invalid File");
-      }
-      //If array buffer convert it string
-      if(reader.result instanceof ArrayBuffer){
-        const arr = new Uint8Array(reader.result);
-        const str = String.fromCharCode(...arr);
-        resolve(str);
-      }
-      resolve(reader.result as string);
-    };
-    reader.onerror = reject;
-    reader.readAsDataURL(file);
-  });
-};
+export function convertFileToBase64(file: File): Promise<string> {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = () => {
+			if (reader.result == null) {
+				throw new Error("Invalid File");
+			}
+			//If array buffer convert it string
+			if (reader.result instanceof ArrayBuffer) {
+				const arr = new Uint8Array(reader.result);
+				const str = String.fromCharCode(...arr);
+				resolve(str);
+			}
+			resolve(reader.result as string);
+		};
+		reader.onerror = reject;
+		reader.readAsDataURL(file);
+	});
+}
 
 export function convertBase64ToFile(base64: string, filename = "untitled"): File {
-  const arr = base64.split(',');
-  const mime = arr[0].match(/:(.*?);/);
-  if(mime == null || mime[1] == undefined){
-    throw new Error("Invalid base64 string");
-  }
+	const arr = base64.split(",");
+	const mime = arr[0].match(/:(.*?);/);
+	if (mime == null || mime[1] == undefined) {
+		throw new Error("Invalid base64 string");
+	}
 
-  const bstr = atob(arr[1]);
-  let n = bstr.length;
-  const u8arr = new Uint8Array(n);
-  while(n--){
-    u8arr[n] = bstr.charCodeAt(n);
-  }
-  return new File([u8arr], filename, {type: mime[1]});
+	const bstr = atob(arr[1]);
+	let n = bstr.length;
+	const u8arr = new Uint8Array(n);
+	while (n--) {
+		u8arr[n] = bstr.charCodeAt(n);
+	}
+	return new File([u8arr], filename, { type: mime[1] });
+}
+
+export function getFileLink(fileInput: HTMLInputElement, fileIndex = 0) {
+	if (!fileInput.files) {
+		return null;
+	}
+	let blobURL = URL.createObjectURL(fileInput.files[fileIndex]);
+	return blobURL;
 }
 
-export function getFileLink(fileInput:HTMLInputElement, fileIndex = 0){
-  if(!fileInput.files){
-    return null;
+
+export async function resizeAndCropImage({
+  rawImage,
+  downsize,
+  targetAspect
+}: {
+  rawImage: File;
+  downsize: { height: number; width: number };
+  targetAspect: `${number}x${number}`;
+}): Promise<File> {
+  // Create image element from file
+  const img = new Image();
+  const imageUrl = URL.createObjectURL(rawImage);
+  
+  await new Promise<void>((resolve, reject) => {
+    img.onload = () => resolve();
+    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;
+
+  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;
   }
-  let blobURL = URL.createObjectURL(fileInput.files[fileIndex]);
-  return blobURL;
+
+  // Draw cropped and resized image on canvas
+  const canvas = document.createElement('canvas');
+  canvas.width = targetWidth;
+  canvas.height = targetHeight;
+  const ctx = canvas.getContext('2d')!;
+  
+  ctx.drawImage(
+    img,
+    sourceX, sourceY, sourceWidth, sourceHeight,
+    0, 0, targetWidth, targetHeight
+  );
+
+  // Clean up
+  URL.revokeObjectURL(imageUrl);
+
+  // Convert canvas to blob then to File
+  return new Promise<File>((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (!blob) {
+        reject(new Error('Failed to create blob'));
+        return;
+      }
+      const file = new File([blob], rawImage.name, { type: 'image/png' });
+      resolve(file);
+    }, 'image/png');
+  });
 }