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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/web.d.ts +3 -3
  2. package/dist/web.js +32 -22
  3. package/package.json +1 -1
  4. package/web.ts +39 -28
package/dist/web.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  export declare function convertFileToBase64(file: File): Promise<string>;
2
2
  export declare function convertBase64ToFile(base64: string, filename?: string): File;
3
3
  export declare function getFileLink(fileInput: HTMLInputElement, fileIndex?: number): string | null;
4
- export declare function resizeAndCropImage({ rawImage, downsize, targetAspect }: {
4
+ export declare function resizeAndCropImage({ rawImage, downsizingTo, targetCrop }: {
5
5
  rawImage: File;
6
- downsize: {
6
+ downsizingTo?: {
7
7
  height: number;
8
8
  width: number;
9
9
  };
10
- targetAspect: `${number}x${number}`;
10
+ targetCrop?: `${number}x${number}`;
11
11
  }): Promise<File>;
package/dist/web.js CHANGED
@@ -44,7 +44,7 @@ function getFileLink(fileInput, fileIndex = 0) {
44
44
  let blobURL = URL.createObjectURL(fileInput.files[fileIndex]);
45
45
  return blobURL;
46
46
  }
47
- async function resizeAndCropImage({ rawImage, downsize, targetAspect }) {
47
+ async function resizeAndCropImage({ rawImage, downsizingTo, targetCrop }) {
48
48
  // Create image element from file
49
49
  const img = new Image();
50
50
  const imageUrl = URL.createObjectURL(rawImage);
@@ -53,35 +53,45 @@ async function resizeAndCropImage({ rawImage, downsize, targetAspect }) {
53
53
  img.onerror = reject;
54
54
  img.src = imageUrl;
55
55
  });
56
- // Parse target aspect ratio (e.g., "2x3" -> 2/3)
57
- const [aspectWidth, aspectHeight] = targetAspect.split('x').map(Number);
58
- const targetRatio = aspectWidth / aspectHeight;
59
- // Target dimensions
60
- const targetWidth = downsize.width;
61
- const targetHeight = downsize.height;
62
- // Calculate source image ratio
63
- const imgRatio = img.width / img.height;
56
+ // Step 1: Calculate the dimensions after optional cropping
64
57
  let sourceX = 0;
65
58
  let sourceY = 0;
66
59
  let sourceWidth = img.width;
67
60
  let sourceHeight = img.height;
68
- // Crop to target ratio (centered crop)
69
- if (imgRatio > targetRatio) {
70
- // Image is wider - crop width
71
- sourceWidth = img.height * targetRatio;
72
- sourceX = (img.width - sourceWidth) / 2;
61
+ if (targetCrop) {
62
+ // Parse target aspect ratio (e.g., "2x3" -> 2/3)
63
+ const [aspectWidth, aspectHeight] = targetCrop.split('x').map(Number);
64
+ const targetRatio = aspectWidth / aspectHeight;
65
+ const imgRatio = img.width / img.height;
66
+ // Center crop to target ratio
67
+ if (imgRatio > targetRatio) {
68
+ // Image is wider - crop width
69
+ sourceWidth = img.height * targetRatio;
70
+ sourceX = (img.width - sourceWidth) / 2;
71
+ }
72
+ else if (imgRatio < targetRatio) {
73
+ // Image is taller - crop height
74
+ sourceHeight = img.width / targetRatio;
75
+ sourceY = (img.height - sourceHeight) / 2;
76
+ }
73
77
  }
74
- else if (imgRatio < targetRatio) {
75
- // Image is taller - crop height
76
- sourceHeight = img.width / targetRatio;
77
- sourceY = (img.height - sourceHeight) / 2;
78
+ // Step 2: Calculate canvas dimensions after optional downsizing
79
+ let canvasWidth = sourceWidth;
80
+ let canvasHeight = sourceHeight;
81
+ if (downsizingTo) {
82
+ // Scale down to fit within bounds while maintaining aspect ratio
83
+ const scaleX = downsizingTo.width / sourceWidth;
84
+ const scaleY = downsizingTo.height / sourceHeight;
85
+ const scale = Math.min(scaleX, scaleY, 1); // Only downsize, never upsize
86
+ canvasWidth = sourceWidth * scale;
87
+ canvasHeight = sourceHeight * scale;
78
88
  }
79
- // Draw cropped and resized image on canvas
89
+ // Draw image on canvas (no stretching, fills entire canvas)
80
90
  const canvas = document.createElement('canvas');
81
- canvas.width = targetWidth;
82
- canvas.height = targetHeight;
91
+ canvas.width = canvasWidth;
92
+ canvas.height = canvasHeight;
83
93
  const ctx = canvas.getContext('2d');
84
- ctx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, targetWidth, targetHeight);
94
+ ctx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, canvasWidth, canvasHeight);
85
95
  // Clean up
86
96
  URL.revokeObjectURL(imageUrl);
87
97
  // Convert canvas to blob then to File
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jsarmyknife/native--file",
3
- "version": "1.0.3-beta.0",
3
+ "version": "2.0.0-beta.0",
4
4
  "public": true,
5
5
  "description": "All Utilities you need for manipulating files.",
6
6
  "main": "dist/index.js",
package/web.ts CHANGED
@@ -45,12 +45,12 @@ export function getFileLink(fileInput: HTMLInputElement, fileIndex = 0) {
45
45
 
46
46
  export async function resizeAndCropImage({
47
47
  rawImage,
48
- downsize,
49
- targetAspect
48
+ downsizingTo,
49
+ targetCrop
50
50
  }: {
51
51
  rawImage: File;
52
- downsize: { height: number; width: number };
53
- targetAspect: `${number}x${number}`;
52
+ downsizingTo?: { height: number; width: number };
53
+ targetCrop?: `${number}x${number}`;
54
54
  }): Promise<File> {
55
55
  // Create image element from file
56
56
  const img = new Image();
@@ -62,43 +62,54 @@ export async function resizeAndCropImage({
62
62
  img.src = imageUrl;
63
63
  });
64
64
 
65
- // Parse target aspect ratio (e.g., "2x3" -> 2/3)
66
- const [aspectWidth, aspectHeight] = targetAspect.split('x').map(Number);
67
- const targetRatio = aspectWidth / aspectHeight;
68
-
69
- // Target dimensions
70
- const targetWidth = downsize.width;
71
- const targetHeight = downsize.height;
72
-
73
- // Calculate source image ratio
74
- const imgRatio = img.width / img.height;
75
-
65
+ // Step 1: Calculate the dimensions after optional cropping
76
66
  let sourceX = 0;
77
67
  let sourceY = 0;
78
68
  let sourceWidth = img.width;
79
69
  let sourceHeight = img.height;
80
70
 
81
- // Crop to target ratio (centered crop)
82
- if (imgRatio > targetRatio) {
83
- // Image is wider - crop width
84
- sourceWidth = img.height * targetRatio;
85
- sourceX = (img.width - sourceWidth) / 2;
86
- } else if (imgRatio < targetRatio) {
87
- // Image is taller - crop height
88
- sourceHeight = img.width / targetRatio;
89
- sourceY = (img.height - sourceHeight) / 2;
71
+ if (targetCrop) {
72
+ // Parse target aspect ratio (e.g., "2x3" -> 2/3)
73
+ const [aspectWidth, aspectHeight] = targetCrop.split('x').map(Number);
74
+ const targetRatio = aspectWidth / aspectHeight;
75
+ const imgRatio = img.width / img.height;
76
+
77
+ // Center crop to target ratio
78
+ if (imgRatio > targetRatio) {
79
+ // Image is wider - crop width
80
+ sourceWidth = img.height * targetRatio;
81
+ sourceX = (img.width - sourceWidth) / 2;
82
+ } else if (imgRatio < targetRatio) {
83
+ // Image is taller - crop height
84
+ sourceHeight = img.width / targetRatio;
85
+ sourceY = (img.height - sourceHeight) / 2;
86
+ }
87
+ }
88
+
89
+ // Step 2: Calculate canvas dimensions after optional downsizing
90
+ let canvasWidth = sourceWidth;
91
+ let canvasHeight = sourceHeight;
92
+
93
+ if (downsizingTo) {
94
+ // Scale down to fit within bounds while maintaining aspect ratio
95
+ const scaleX = downsizingTo.width / sourceWidth;
96
+ const scaleY = downsizingTo.height / sourceHeight;
97
+ const scale = Math.min(scaleX, scaleY, 1); // Only downsize, never upsize
98
+
99
+ canvasWidth = sourceWidth * scale;
100
+ canvasHeight = sourceHeight * scale;
90
101
  }
91
102
 
92
- // Draw cropped and resized image on canvas
103
+ // Draw image on canvas (no stretching, fills entire canvas)
93
104
  const canvas = document.createElement('canvas');
94
- canvas.width = targetWidth;
95
- canvas.height = targetHeight;
105
+ canvas.width = canvasWidth;
106
+ canvas.height = canvasHeight;
96
107
  const ctx = canvas.getContext('2d')!;
97
108
 
98
109
  ctx.drawImage(
99
110
  img,
100
111
  sourceX, sourceY, sourceWidth, sourceHeight,
101
- 0, 0, targetWidth, targetHeight
112
+ 0, 0, canvasWidth, canvasHeight
102
113
  );
103
114
 
104
115
  // Clean up