Cách cắt ảnh trên trình duyệt hoạt động
Quá trình cắt diễn ra hoàn toàn trong tab trình duyệt của bạn bằng Canvas API. Không xử lý phía máy chủ, không tải lên, không có dịch vụ bên thứ ba. Mọi bước đều diễn ra trên thiết bị của bạn.
- Tải ảnh vào phần tử
<img>để trình duyệt giải mã cục bộ. Một lớp phủ Canvas hiển thị ảnh được chia tỷ lệ vừa với khung nhìn trong khi hình chữ nhật chọn có thể kéo hiển thị vùng cắt hiện tại. - Kéo hình chữ nhật bằng các cạnh hoặc góc của nó để điều chỉnh vùng cắt. Hình chữ nhật được giữ trong ranh giới ảnh để bạn không thể chọn vùng bên ngoài ảnh. Khi tỷ lệ cố định được kích hoạt (1:1, 16:9, 4:3), việc thay đổi kích thước tự động duy trì tỷ lệ đó.
- Chỉ số pixel cập nhật trực tiếp khi bạn kéo, hiển thị chiều rộng, chiều cao, vị trí X và Y hiện tại của vùng cắt theo tọa độ pixel ảnh. Điều này cho phép bạn nhắm đến kích thước chính xác mà không cần phỏng đoán.
- Khi bạn nhấp Cắt & Tải xuống, trang sẽ vẽ chỉ vùng đã chọn của ảnh nguồn lên một canvas ngoài màn hình ở độ phân giải pixel gốc, sau đó xuất kết quả qua
canvas.toBlob()ở cùng định dạng với tệp nguồn. Một URL Blob được tạo để tải xuống.
Tại sao nên cắt ảnh trực tuyến?
- Cắt ảnh loại bỏ các cạnh không mong muốn, không gian trống hoặc sự lộn xộn thị giác. Một lần cắt thường cải thiện bố cục ảnh nhiều hơn bất kỳ bộ lọc hoặc điều chỉnh màu sắc nào.
- Kiểm soát tỷ lệ khung hình rất cần thiết cho các nền tảng xuất bản. Mạng xã hội yêu cầu 1:1 cho hồ sơ, 16:9 cho hình thu nhỏ video và 4:3 cho nhiếp ảnh tiêu chuẩn. Cắt đúng tỷ lệ tránh hiện tượng viền đen hoặc bị cắt xén khó chịu khi tải lên.
- Cắt phía máy khách là lựa chọn duy nhất trên các thiết bị doanh nghiệp bị khóa thiếu trình chỉnh sửa ảnh. Vì không có gì được tải lên, không có rủi ro rò rỉ dữ liệu và không cần đánh giá tuân thủ cho ảnh nhạy cảm.
- Hiển thị kích thước trực tiếp loại bỏ phỏng đoán. Bạn thấy tọa độ pixel và kích thước vùng chọn khi kéo, vì vậy bạn có thể cắt đến chiều rộng và chiều cao chính xác mà không cần chuyển sang công cụ đo pixel.
Các ứng dụng cắt ảnh phổ biến
Cắt ảnh là một trong những chỉnh sửa ảnh phổ biến nhất trong xuất bản web, mạng xã hội và phát triển phần mềm. Đây là ba trường hợp mà công cụ cắt trên trình duyệt tiết kiệm thời gian.
- Chuẩn bị ảnh sản phẩm cho cửa hàng trực tuyến. Cắt theo tỷ lệ 1:1 hoặc 4:5 nhất quán để mọi hình thu nhỏ danh mục thẳng hàng trong lưới. Xuất giữ nguyên định dạng gốc, vì vậy ảnh sản phẩm JPEG vẫn là JPEG.
- Cắt ảnh chụp màn hình cho tài liệu hoặc báo cáo lỗi. Cắt bỏ thanh công cụ trình duyệt, thanh tác vụ Windows hoặc thông báo nhạy cảm trước khi đính kèm ảnh vào ticket hoặc pull request.
- Đóng khung ảnh hero hoặc banner cho trang đích. Khóa cài đặt trước 16:9, đặt phần quan trọng nhất của ảnh vào trung tâm hình chữ nhật cắt và xuất ở độ phân giải gốc để có chất lượng tốt nhất trên màn hình retina.
Ví dụ thực tế: cắt ảnh 4000×3000 thành 1200×675 cho banner chính
Một ảnh 4000×3000 pixel từ máy ảnh kỹ thuật số quá lớn cho một banner web điển hình. Không gian banner có thể là 1200×675 (khung 16:9).
Thả ảnh vào khu vực tải lên. Ảnh được tải ở độ phân giải đầy đủ nhưng được chia tỷ lệ để vừa với khung nhìn cho thao tác kéo thoải mái. Chọn cài đặt trước tỷ lệ 16:9. Hình chữ nhật cắt ngay lập tức chụp vào vùng 16:9 rộng nhất vừa với ảnh. Kéo hình chữ nhật để đặt điểm lấy nét — đỉnh núi, sản phẩm, khuôn mặt — trong khung. Chỉ số trực tiếp hiển thị vùng chọn hiện tại ở 4000×2250 (cửa sổ 16:9 toàn ảnh). Nắm một góc và kéo vào trong cho đến khi chỉ số chiều rộng đạt 1200 px. Chiều cao tự động điều chỉnh vì tỷ lệ đã được khóa. Nhấp Cắt & Tải xuống. Trang trích xuất vùng 1200×675 đã chọn từ pixel gốc và cung cấp tệp đã cắt ở định dạng nguồn. Toàn bộ quá trình mất một hoặc hai giây và không sử dụng băng thông mạng nào ngoài lần tải trang ban đầu.
Những định dạng ảnh nào được hỗ trợ để cắt?
Công cụ chấp nhận bất kỳ định dạng nào trình duyệt có thể giải mã: PNG, JPEG và WebP bao phủ hầu hết các trường hợp sử dụng thực tế. Đầu ra đã cắt được lưu ở cùng định dạng với tệp nguồn. PNG giữ nguyên chất lượng không mất dữ liệu, JPEG giữ nguyên mức chất lượng gốc và WebP vẫn là WebP. Định dạng được phát hiện từ loại MIME của tệp nguồn.
Việc cắt có làm giảm kích thước tệp ảnh không?
Cắt ảnh loại bỏ pixel, vì vậy kích thước tệp đầu ra thường nhỏ hơn nguồn, đặc biệt khi bạn cắt bỏ một đường viền lớn hoặc vùng trống. Xuất sử dụng định dạng tệp gốc và các tham số mã hóa của nó — PNG giữ nguyên chất lượng không mất dữ liệu, JPEG giữ nguyên cài đặt chất lượng gốc — vì vậy tiết kiệm chỉ đến từ số pixel giảm, không phải từ nén lại.
Các cài đặt trước tỷ lệ khung hình làm gì?
Các cài đặt trước (1:1, 16:9, 4:3, 3:2, 9:16) khóa tỷ lệ chiều rộng trên chiều cao của hình chữ nhật cắt. Khi một cài đặt trước được kích hoạt, kéo bất kỳ góc hoặc cạnh nào sẽ điều chỉnh kích thước vùng chọn trong khi giữ tỷ lệ không đổi. Chuyển sang chế độ Tự do loại bỏ ràng buộc để bạn có thể thay đổi kích thước hình chữ nhật tùy ý. Tỷ lệ được áp dụng trên tọa độ pixel ảnh, vì vậy đầu ra xuất có chính xác tỷ lệ bạn đã chọn.
Ảnh có được tải lên máy chủ không?
Không. Ảnh không bao giờ rời khỏi thiết bị của bạn. Trang sử dụng File API của trình duyệt để đọc ảnh vào bộ nhớ và Canvas API để cắt và xuất kết quả. Bạn có thể xác minh điều này bằng cách mở bảng Network của DevTools trình duyệt — các yêu cầu gửi đi duy nhất trong quá trình cắt là tải trang ban đầu và các cuộc gọi quảng cáo. Không có dữ liệu ảnh nào được truyền đi.
Tôi có thể cắt một vùng cụ thể bằng cách nhập tọa độ pixel chính xác không?
Phiên bản hiện tại điều chỉnh hình chữ nhật cắt thông qua tương tác kéo trên bản xem trước ảnh. Bạn có thể đọc tọa độ pixel trực tiếp cho X, Y, chiều rộng và chiều cao của vùng chọn. Nhập số trực tiếp cho hình chữ nhật cắt không khả dụng trong v1 nhưng là tính năng được lên kế hoạch cho bản cập nhật trong tương lai.
Điều gì xảy ra với ảnh gốc?
Tệp gốc vẫn ở trên thiết bị của bạn. Trang đọc nó vào bộ nhớ trình duyệt để hiển thị và cắt, nhưng không bao giờ sửa đổi tệp nguồn trên đĩa. Đầu ra đã cắt là một tệp mới mà bạn tải xuống riêng. Bản gốc vẫn không thay đổi tại vị trí ban đầu trên máy tính hoặc điện thoại của bạn.
Có giới hạn kích thước tệp cho việc cắt không?
Công cụ tuân thủ giới hạn 30 MB mỗi tệp trong khu vực tải lên để giữ bộ nhớ trình duyệt ở mức kiểm soát trên các thiết bị cấp thấp. Nếu ảnh của bạn lớn hơn 30 MB, bạn có thể thay đổi kích thước trước bằng công cụ thay đổi kích thước ảnh chuyên dụng trước khi tải lên đây để cắt.
Việc cắt có hoạt động trên điện thoại di động và máy tính bảng không?
Có. Các tay cầm cắt được thiết kế với kích thước phù hợp cho thao tác chạm và tương tác sử dụng sự kiện con trỏ hoạt động với cả nhấp chuột và chạm ngón tay. Trên màn hình điện thoại, bản xem trước ảnh thích ứng với chiều rộng khả dụng và các điều khiển xếp chồng theo chiều dọc để dễ dàng sử dụng bằng một tay.