Chuyển tới nội dung chính
Platform/Tools/Image / Dev tools/Ghép ảnh collage
IMAGE / DEV TOOLS

Ghép nhiều ảnh thành 1 (collage)

6 layout · 2×2, 1+2, 3-col, 2×3, 4-col, stack — IG/FB ratio · gap · bo góc · màu nền

IGFB6 layout
Ghép ảnh collage
Multi-frame · Drag & drop · 100% client-side
100% xử lý trên máy bạn — file không upload lên server
🖼️
Bấm hoặc kéo nhiều ảnh vào (tối đa 12)
Đã chọn: 0 ảnh — cần 4 cho layout này

Hướng dẫn ghép ảnh collage

Ghép nhiều ảnh sản phẩm hoặc ảnh trước/sau vào 1 tấm ảnh duy nhất để đăng bài là việc chủ shop hay làm tay bằng cách chụp màn hình rồi cắt dán, tốn thời gian và dễ lệch khung. Công cụ này cho chọn 1 trong 6 khung bố cục dựng sẵn, kéo-thả ảnh vào từng ô, chỉnh khoảng cách/bo góc/màu nền, rồi xuất ra 1 file ảnh ghép hoàn chỉnh.

Ảnh chọn vào được xem trước (live preview) ngay trên trang trước khi xuất file cuối, giúp thấy đúng bố cục sẽ ra sao mà không cần xuất thử nhiều lần. Toàn bộ việc ghép ảnh chạy bằng Canvas API trong trình duyệt — không có bước tải ảnh lên máy chủ.

Công cụ nhận tối đa 12 ảnh mỗi lượt, nhưng mỗi bố cục chỉ dùng đúng số ô cần thiết (3-6 ảnh tuỳ khung) — ảnh dư ra ngoài số ô sẽ không xuất hiện trong ảnh ghép cuối cùng.

Bảng màu thương hiệu trên bàn thiết kế
Ảnh sản phẩm và bộ màu thống nhất là phần khách nhìn thấy trước khi đọc bất kỳ dòng chữ nào.

6 bố cục dựng sẵn

Bố cụcSố ảnh cầnGợi ý dùng cho
Lưới 2×24 ảnh4 góc sản phẩm hoặc 4 sản phẩm cùng loại
1 lớn + 2 nhỏ3 ảnhẢnh chính lớn kèm 2 ảnh chi tiết nhỏ
3 cột ngang3 ảnhSo sánh trước/trong/sau, hoặc 3 màu sản phẩm
Lưới 2×36 ảnhBộ sưu tập nhiều sản phẩm, cần nhiều ô nhất
4 cột Insta4 ảnhDạng carousel dàn ngang kiểu Instagram
4 hàng dọc4 ảnhẢnh dạng story dọc, dễ xem trên điện thoại
Số ảnh cần đúng bằng "slots" của từng layout trong ImageCollage.tsx — thiếu ảnh thì ô đó để trống có nhãn "+ Ảnh".

4 khổ canvas dựng sẵn

  • 1080×1080 — vuông, dùng cho bài đăng Instagram/Facebook dạng vuông.
  • 1080×1350 — dọc, dùng cho bài đăng Instagram dạng đứng (chiếm nhiều diện tích feed hơn ảnh vuông).
  • 1200×1200 — vuông, dùng cho bài đăng Facebook.
  • 1920×1080 — ngang, dùng làm ảnh bìa hoặc banner.

Chỉnh bố cục và đổi thứ tự ảnh

Ảnh được xếp vào các ô theo đúng thứ tự đã chọn/kéo vào — ô nào có viền màu cam đậm là ô sẽ dùng cho layout hiện tại, ảnh thừa viền mờ sẽ không xuất hiện trong ảnh ghép.

Đổi thứ tự ảnh bằng nút mũi tên "↑" trên từng ảnh để đẩy ảnh đó lên trước — đây là cách đổi vị trí duy nhất, không phải kéo-thả sắp xếp lại trong danh sách.

Khoảng cách giữa các ô (0-40px) và độ bo góc (0-60px) chỉnh bằng thanh trượt, màu nền chọn bằng bảng màu — cả ba đều cập nhật ngay trên preview.

Ví dụ: ghép 3 ảnh theo bố cục "3 cột ngang", khổ 1200×1200

  1. Chọn layout: 3 cột ngang — cần đúng 3 ảnh
  2. Chọn khổ canvas: 1200×1200 (FB)
  3. Kéo/chọn 3 ảnh vào khung: Cả 3 ô hiện viền cam đậm — đủ ảnh cho layout
  4. Bấm "Xuất ảnh ghép HD (JPG)": Ra 1 file JPG duy nhất kích thước đúng 1200×1200

File xuất luôn là JPG (không có tuỳ chọn PNG cho ảnh ghép) — nếu cần nền trong suốt phải dùng công cụ Crop vuông ở Image Toolkit.

Lỗi thường gặp khi tính tay

  • Chọn layout cần 6 ảnh (Lưới 2×3) nhưng chỉ đưa vào 3 ảnh — 3 ô còn lại sẽ để trống với nhãn "+ Ảnh", ảnh ghép ra sẽ có phần trống chứ không tự co giãn lấp đầy.
  • Đổi khổ canvas sau khi đã chỉnh gap/bo góc kỹ — đổi khổ có thể làm bố cục co giãn lại theo tỷ lệ khung mới, nên kiểm tra lại preview trước khi xuất.
  • Tưởng nút "↑" là kéo-thả tự do — đây chỉ là đẩy 1 ảnh lên trước 1 vị trí, muốn đổi ảnh ở vị trí xa cần bấm nhiều lần.
  • Đưa vào hơn 12 ảnh rồi thắc mắc vì sao thiếu ảnh — công cụ chỉ giữ tối đa 12 ảnh mỗi lượt, ảnh thêm vào sau ngưỡng này sẽ không được nhận thêm.
  • Xuất ảnh ghép xong lại resize thủ công cho vừa sàn — nên chọn đúng khổ canvas theo nơi định đăng (Instagram vuông/dọc, Facebook, banner) ngay từ đầu để không phải resize lại.

Cần làm tiếp việc gì sau khi tính xong

// Câu hỏi thường gặp

Bạn có thắc mắc về Ghép ảnh collage?

Ảnh ghép có xử lý và lưu trên máy chủ không?+

Không. Việc ghép ảnh dùng Canvas API chạy ngay trong trình duyệt, ảnh không được tải lên hay lưu trữ ở máy chủ nào trong quá trình ghép.

Công cụ có hỗ trợ kéo-thả để đổi thứ tự ảnh trong khung không?+

Đổi thứ tự dùng nút mũi tên "↑" để đẩy ảnh lên trước 1 vị trí — đây là cách sắp xếp duy nhất hiện có, không phải kéo-thả tự do trong danh sách ảnh.

Chọn layout cần 6 ảnh nhưng chỉ có 3 ảnh thì sao?+

3 ô còn thiếu sẽ hiện nhãn "+ Ảnh" và để trống trong ảnh ghép cuối cùng — không tự động co giãn 3 ảnh đã có để lấp đầy 6 ô.

File ảnh ghép xuất ra có hỗ trợ nền trong suốt (PNG) không?+

Không. Ảnh ghép luôn xuất ra định dạng JPG duy nhất, không có tuỳ chọn PNG hay nền trong suốt cho công cụ này.

Tối đa đưa được bao nhiêu ảnh vào công cụ?+

Tối đa 12 ảnh mỗi lượt, nhưng mỗi bố cục chỉ dùng đúng số ô cần thiết (3-6 ảnh tuỳ layout) — ảnh dư ngoài số ô sẽ không xuất hiện trong ảnh ghép.

Nên chọn khổ canvas nào để đăng Instagram dạng story/feed dọc?+

Chọn khổ 1080×1350 (IG portrait) — chiếm nhiều diện tích màn hình hơn ảnh vuông 1080×1080 khi hiển thị trên feed Instagram.

// Tools liên quan
// CẦN HƠN TOOL?

Web cho doanh nghiệp của bạn?

Webchốt là studio thiết kế web Next.js. Tools miễn phí. Service chuyên nghiệp khi cần.

Demo