Resize
Resize (Image Scaling)
The operation of changing an image's pixel dimensions by scaling it up (enlarging) or down (reducing), using mathematical interpolation to calculate new pixel values at the target resolution.
技術的詳細
Downscaling removes pixels using area averaging or supersampling, generally producing good results. Upscaling must infer new pixel values using interpolation: nearest-neighbor (preserves hard edges, pixelated), bilinear (weighted average of 4 nearest pixels), bicubic (weighted average of 16 pixels, smoother), and Lanczos (sinc-based, sharpest without ringing). In browsers, Canvas drawImage() respects the imageSmoothingEnabled and imageSmoothingQuality settings. CSS image-rendering: pixelated disables interpolation for pixel art. For significant upscaling, AI super-resolution networks produce far superior results to traditional interpolation.
例
```javascript
// Resize image using Canvas API
const canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 600;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, 800, 600);
canvas.toBlob(blob => {
// Download resized image
saveAs(blob, 'resized.png');
}, 'image/png');
```