function processImage(originalImg, cropX = 0, cropY = 0, cropWidth = 250, cropHeight = 250) {
let cx = parseInt(cropX, 10);
let cy = parseInt(cropY, 10);
let cw = parseInt(cropWidth, 10);
let ch = parseInt(cropHeight, 10);
// Fallback to defaults if invalid inputs are provided
if (isNaN(cx)) cx = 0;
if (isNaN(cy)) cy = 0;
if (isNaN(cw)) cw = 250;
if (isNaN(ch)) ch = 250;
// Clamp coordinates and dimensions to ensure they stay within the image boundaries
cx = Math.max(0, Math.min(cx, originalImg.width - 1));
cy = Math.max(0, Math.min(cy, originalImg.height - 1));
cw = Math.max(1, Math.min(cw, originalImg.width - cx));
ch = Math.max(1, Math.min(ch, originalImg.height - cy));
const canvas = document.createElement('canvas');
canvas.width = cw;
canvas.height = ch;
const ctx = canvas.getContext('2d');
// Draw the cropped portion onto the new canvas
ctx.drawImage(
originalImg,
cx, cy, cw, ch, // Source crop coordinates and dimensions
0, 0, cw, ch // Destination coordinates and dimensions on the canvas
);
return canvas;
}The Image Cropper Tool allows users to select and extract specific portions of an image by defining custom coordinates and dimensions. By specifying the starting X and Y positions along with the desired width and height, users can isolate particular elements within a photo. This tool is useful for tasks such as creating profile pictures, isolating objects for design projects, or preparing images for social media by focusing on specific subjects.