Javascript 如何使用HTML画布裁剪和调整图像大小而不使其模糊？

我试图使用JS和HTML画布裁剪图像，但结果非常模糊

我从一个4096x4096的大图像开始，我想将其裁剪到57x57，但我想裁剪原始图像的更大区域，然后调整其大小

原始图像称为

原始图像

// 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);

---

图像被裁剪为正确的尺寸（57x57）和裁剪区域（比57x57大50%），但结果非常模糊。如何才能做到这一点并保持原始图像的质量？

尝试使用cropper.js您阅读了吗？