Front-End Image Processing: Scaling, Cropping, and Rotation with Canvas

Image processing has become a daily necessity, and many front‑end projects require image manipulation. This article series shares practical knowledge accumulated from real‑world projects, focusing on front‑end image processing techniques.

The series is divided into four parts:

Basic image processing – scaling and cropping;

Basic image processing – image composition;

Basic image processing – text composition;

Algorithmic image processing.

Two categories of front‑end image processing are introduced:

Basic type : operations such as scaling, rotation, adding borders, composition, and collage that modify image size or position without pixel‑level algorithms.

Algorithmic type : pixel‑level manipulations (beautify, filters, black‑white, cut‑out, blur, etc.) that focus on algorithmic complexity and performance.

Cross‑origin handling : When loading online images, the server must set proper CORS headers and the <img> element’s crossOrigin attribute must be set to * before assigning src . Tips:

Only set crossOrigin for remote images; do not set it for local paths or base64 data.

In WebView environments, crossOrigin may be ignored; converting images to base64 is a reliable workaround.

Set crossOrigin before the image starts loading.

Image loading : Ensure the image is fully loaded before drawing to a canvas, either by using the onload event of an existing <img> tag or by creating a new Image() object in JavaScript.

Scaling : Create a canvas with the target dimensions while preserving the aspect ratio, then draw the image with ctx.drawImage(image, dx, dy, dw, dh) . Export the result as a base64 string using canvas.toDataURL(type, quality) . Example method signatures:

ctx.drawImage(image, dx, dy, dw, dh) – draws the image with optional scaling.

canvas.toDataURL('image/jpeg', 0.9) – exports JPEG with 90% quality (use image/png for lossless output).

Tip: Use image/jpeg (not image/jpg ) for JPEG output.

Converting various formats to base64 : Use the native <input type="file"> to obtain a File object, then read it with FileReader to get a base64 string, which can be processed with the canvas workflow. Be aware of EXIF orientation issues on iOS; use libraries such as exif.js to read the orientation and correct it with canvas rotation, or use canvasResize.js for a complete solution.

Cropping : Adjust the dx and dy parameters of drawImage to offset the source image, effectively cropping to the canvas size. The article provides a sample function that crops a 600×800 image to a centered 600×600 square.

Rotation : Rotate the canvas using ctx.rotate(angle) . Since rotation can clip the image corners, enlarge the canvas container (e.g., 1.5× for square images) before drawing to avoid loss. The rotation origin must be moved to the canvas center, and dx / dy should be calculated relative to that new origin.

Summary : The article covers the classification of image processing techniques, cross‑origin handling, image loading, and the two most common basic operations—scaling, cropping, and rotation. The next article will dive into image composition.