Client-Side Image Cropping: Canvas API, Aspect Ratios, and the Math Behind It

Every application that accepts user-uploaded images eventually needs a cropper. Profile pictures need to be square. Cover images need to be 16:9. Thumbnails need to be consistent. And you'd rather let users crop on the client side than upload a full-resolution 8MB photo and crop it on the server. The good news is that the browser's Canvas API gives you everything you need to build image cropping without any external dependencies. The less-good news is that there are several non-obvious details that determine whether the result looks sharp or blurry, works on Retina displays, and handles large images without crashing the browser. The fundamental operation Image cropping on canvas is a single method call. drawImage has a nine-argument form that lets you specify a source rectangle (the crop area in the original image) and a destination rectangle (the output canvas): ctx . drawImage ( image , // source image sx , sy , // source x, y (top-left of crop area) sWidth , sHeight , // source widt