Crop
Cắt xén (Chọn Vùng Ảnh)
Thao tác chọn và chỉ giữ một phần hình chữ nhật của ảnh trong khi loại bỏ mọi thứ bên ngoài vùng đã chọn, được sử dụng để cải thiện bố cục, loại bỏ các phần tử không mong muốn hoặc điều chỉnh tỷ lệ khung hình.
Chi tiết kỹ thuật
Cắt xén trích xuất một hình chữ nhật con được xác định bởi tọa độ (x, y, chiều rộng, chiều cao) từ lưới pixel. Không giống như chia tỷ lệ, cắt xén không thay đổi giá trị pixel hoặc tạo artifact nội suy. Trong Canvas API, ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh) cắt xén trong khi vẽ. Các cài đặt phổ biến bao gồm 1:1 (vuông/mạng xã hội), 16:9 (màn hình rộng), 4:3 (truyền thống) và 3:2 (DSLR). Thuật toán cắt thông minh (dựa trên độ nổi bật) tự động phát hiện vùng quan trọng nhất của ảnh. Cắt xén ở các tỷ lệ khung hình khác nhau cũng được sử dụng cho ảnh đáp ứng thông qua thuộc tính CSS object-fit và object-position.
Ví dụ
```javascript
// Crop image to specific region
const canvas = document.createElement('canvas');
canvas.width = cropWidth;
canvas.height = cropHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(
img,
cropX, cropY, cropWidth, cropHeight, // source rect
0, 0, cropWidth, cropHeight // dest rect
);
```