Aquí está su función actualizada

 export async function cropPreview( image: HTMLImageElement, canvas: HTMLCanvasElement, crop: PixelCrop, scale = 1, rotate = 0, ) { const ctx = canvas.getContext('2d') if (!ctx) { throw new Error('No 2d context') } const scaleX = image.naturalWidth / image.width const scaleY = image.naturalHeight / image.height const pixelRatio = window.devicePixelRatio || 1 canvas.width = Math.floor(crop.width * pixelRatio * scaleX) canvas.height = Math.floor(crop.height * pixelRatio * scaleY) ctx.scale(pixelRatio, pixelRatio) ctx.imageSmoothingQuality = 'high' const cropX = crop.x * scaleX const cropY = crop.y * scaleY const cropWidth = crop.width * scaleX const cropHeight = crop.height * scaleY const rotateRads = rotate * TO_RADIANS const centerX = image.width / 2 const centerY = image.height / 2 ctx.save() // 5) Move the crop origin to the canvas origin (0,0) ctx.translate(-cropX, -cropY) // 4) Move the origin to the center of the original position ctx.translate(centerX, centerY) // 3) Rotate around the origin ctx.rotate(rotateRads) // 2) Scaled the image ctx.scale(scale, scale) // 1) Move the center of the image to the origin (0,0) ctx.translate(-centerX, -centerY) ctx.drawImage( image, 0, 0, image.width, image.height, 0, 0, image.width, image.height, ) ctx.restore() }

En lugar de tratar de descubrir cómo recortar, simplemente puede dejar que el lienzo lo recorte.

Las transformaciones se aplican en el orden inverso al que aparecen, así que lo que estoy haciendo es

1. Mover el centro de la imagen al origen (0,0)
2. Escalado la imagen
3. Rotar alrededor del origen
4. Mover el origen al centro de la posición original
5. Mover el origen del recorte al origen del lienzo (0,0)