Tại sao dân thiết kế lại cần Công cụ Cắt Ảnh Theo Lưới (Sprite Sheet Splitter)?
Trong quá trình thiết kế đồ hoạ, làm Web hay Game Development, bạn sẽ rất thường xuyên bắt gặp những tệp ảnh khổng lồ chứa hàng tá, thậm chí hàng trăm icon/sticker nhỏ bên trong. Các tín đồ công nghệ gọi định dạng này là Sprite Sheet hoặc Image Grid.
Việc gom chung nhiều ảnh nhỏ vào một file Sprite Sheet lớn là một kỹ thuật tối ưu hóa siêu đỉnh để giảm thiểu số lượng Request (Yêu cầu mạng) từ trình duyệt lên Máy chủ. Thế nhưng, thảm họa xảy ra khi bạn tải một tấm Sprite Sheet trên mạng về và chỉ muốn "lấy đúng 1 icon Facebook ở hàng số 2, cột số 3 cục bộ" để chèn vào CV xin việc của mình.
Nếu mở Photoshop lên để kéo vùng chọn (Corp) thủ công từng tấm thì quá mỏi tay. Đó chính là lý do Tiện Ích Mini tung ra bộ Công Cụ Tách Ảnh Theo Lưới Trực Tuyến.
Hướng dẫn sử dụng dao cắt ảnh cực mạnh từ JavaScript
- Bấm chọn lấy tệp tin Sprite Grid (ảnh lưới dạng PNG hoặc JPG).
- Hệ thống sẽ vẽ ảnh ra khung xem trước. Hãy đếm số lượng Cột (ngang) và số lượng Hàng (dọc) của logo trên bức ảnh đó.
- Điền 2 con số bạn vừa đếm vào bảng điều khiển. Ngay lập tức, ma trận đường cắt màu đỏ sẽ xuất hiện trùm lên bức hình. Hãy quan sát xem đường màu đỏ đã khớp với các vách ngăn của hình ảnh chưa.
- Nếu lưới đã khớp chuẩn, bạn nhấn nút Tách Ảnh & Tải Về.
Chỉ trong tích tắc, hệ thống sẽ chém bức hình ra làm hàng trăm mảnh nhỏ và tự giác nén tất cả chúng
lại vào một tệp
grid_images.zipcho bạn tải xuống dễ dàng.
Mẹo nhỏ Webmaster: Công nghệ cắt bằng Canvas siêu an toàn
Ảnh gốc của phòng Marketing nộp lên rất quý giá và bảo mậtừ Đừng lo lắng! Tiện Ích Mini không hề tải tệp hình ảnh của bạn lên bất kỳ máy chủ (Server) đám mây nào cả. Toàn bộ thuật toán đếm pixel và tạo ZIP được biên dịch hoàn toàn trên trình duyệt bằng kỹ thuật HTML5 Canvas Client-side. Tức là dù mạng nhà bạn có bị rớt sóng đi chăng nữa, bạn vẫn tách ảnh vô tư.