Cắt Ảnh miễn phí

Cách hoạt động

Cắt ảnh diễn ra hoàn toàn trong trình duyệt bằng HTML5 Canvas API — không tải lên, không máy chủ. Bạn kéo vùng chọn trực tiếp trên phần tử canvas, và khi áp dụng cắt, bộ máy hiển thị 2D tích hợp của trình duyệt chỉ đọc các điểm ảnh đã chọn và mã hóa lại sang JPEG, PNG hoặc WebP.

1. 1
   Ảnh được tải vào bộ nhớ

   Tệp của bạn được đọc bằng URL.createObjectURL(), cung cấp cho trình duyệt một blob URL cục bộ. HTMLImageElement giải mã tệp hoàn toàn trong thẻ trình duyệt — dữ liệu ảnh không bao giờ rời khỏi thiết bị.
2. 2
   Pointer Events điều khiển vùng cắt

   Pointer Events API của trình duyệt (thống nhất đầu vào chuột, cảm ứng và bút) theo dõi thao tác kéo trên lớp phủ canvas. Nhấn bên ngoài vùng chọn sẽ bắt đầu hình chữ nhật mới; nhấn bên trong để di chuyển; nhấn gần góc dưới bên phải để đổi kích thước. Các tỷ lệ khung hình đặt sẵn tùy chọn (1:1, 16:9, 4:3, v.v.) ràng buộc hình dạng khi kéo.
3. 3
   Canvas vẽ bản xem trước trực tiếp

   Mỗi khi vùng cắt thay đổi, ngữ cảnh Canvas 2D vẽ lại ảnh, phủ lớp tối bên ngoài vùng chọn, làm trong vùng cắt để hiện ảnh gốc với độ chính xác đầy đủ, và phủ lưới một phần ba cùng tay nắm đổi kích thước màu xanh ngọc.
4. 4
   toBlob() mã hóa và cung cấp kết quả

   Khi bạn nhấp Cắt, một canvas ngoài màn hình mới được tạo với đúng kích thước vùng cắt. ctx.drawImage() chỉ sao chép hình chữ nhật đã chọn, và canvas.toBlob() mã hóa kết quả bằng bộ mã hóa JPEG, PNG hoặc WebP gốc của trình duyệt ở mức chất lượng bạn chọn. Đầu ra được trả về dạng blob URL cục bộ để tải về.

Công cụ liên quan