mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-09-13 04:08:22 +02:00
James Brunton
8ab060a4be
# Description of Changes When I added Prettier formatting in #6052, my aim was to use just the default settings in Prettier. Turns out, Prettier looks _really hard_ for any config files if it's not explicitly given one, which means that if a developer has some sort of Prettier config file lying around on their system, Prettier might find it and use it. Also, Prettier changes its defaults based on stuff in `.editorconfig` without any good way of disabling that behaviour explicitly in its config file. To solve both of these issues, I've introduced a `.prettierrc` file which sets Prettier's defaults explicitly, and then reformatted all our code _again_ in Prettier's actual default settings. This should achieve the aim of #6052 and remove the possibility for it breaking on different dev computers.
85 lines
2.1 KiB
TypeScript
85 lines
2.1 KiB
TypeScript
/**
|
|
* Crops an image based on the provided pixel crop area using HTML5 Canvas API.
|
|
* Returns a PNG blob ready for upload.
|
|
*/
|
|
|
|
export interface Area {
|
|
x: number;
|
|
y: number;
|
|
width: number;
|
|
height: number;
|
|
}
|
|
|
|
/**
|
|
* Creates a cropped image blob from the source image and crop area.
|
|
*
|
|
* @param imageSrc - Data URL or blob URL of the source image
|
|
* @param pixelCrop - Pixel coordinates and dimensions of the crop area
|
|
* @returns Promise that resolves to a PNG Blob of the cropped image
|
|
*/
|
|
export async function getCroppedImage(
|
|
imageSrc: string,
|
|
pixelCrop: Area,
|
|
): Promise<Blob> {
|
|
return new Promise((resolve, reject) => {
|
|
const image = new Image();
|
|
|
|
image.onload = () => {
|
|
try {
|
|
// Create canvas with crop dimensions
|
|
const canvas = document.createElement("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
if (!ctx) {
|
|
reject(new Error("Failed to get canvas context"));
|
|
return;
|
|
}
|
|
|
|
// Set canvas size to crop dimensions
|
|
canvas.width = pixelCrop.width;
|
|
canvas.height = pixelCrop.height;
|
|
|
|
// Draw the cropped region
|
|
// drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
|
|
// sx, sy: source x, y coordinates
|
|
// sw, sh: source width, height
|
|
// dx, dy: destination x, y coordinates (0, 0 for top-left)
|
|
// dw, dh: destination width, height
|
|
ctx.drawImage(
|
|
image,
|
|
pixelCrop.x,
|
|
pixelCrop.y,
|
|
pixelCrop.width,
|
|
pixelCrop.height,
|
|
0,
|
|
0,
|
|
pixelCrop.width,
|
|
pixelCrop.height,
|
|
);
|
|
|
|
// Convert canvas to PNG blob
|
|
canvas.toBlob(
|
|
(blob) => {
|
|
if (!blob) {
|
|
reject(new Error("Failed to create blob from canvas"));
|
|
return;
|
|
}
|
|
resolve(blob);
|
|
},
|
|
"image/png",
|
|
1.0, // Maximum quality
|
|
);
|
|
} catch (error) {
|
|
reject(error);
|
|
}
|
|
};
|
|
|
|
image.onerror = () => {
|
|
reject(new Error("Failed to load image"));
|
|
};
|
|
|
|
// Start loading the image
|
|
image.src = imageSrc;
|
|
});
|
|
}
|