I'm trying to crop an image using JS and HTML canvas but the result is really blurry.
I'm starting with a large image that is 4096x4096 and I want to crop it to 57x57 but I want to crop a larger area of the original image and then resize it.
The original image is referred to as originalImage.
// increase crop width and height by 50%
const startWidth = Math.round(57 + (57 * 0.5));
const startHeight = Math.round(57 + (57 * 0.5));
// define start x and y crop points based on start dimensions
const startX = (originalImage.width - startWidth) / 2;
const startY = (originalImage.width - startHeight) / 2;
// draw new image
context.drawImage(originalImage, startX, startY, startWidth, startHeight, 0, 0, 57, 57);
The image is cropped with the right dimensions (57x57) and crop area (50% bigger than 57x57) but the result is really blurry. How can I do this and retain the quality of the original image?
