이미지 콜라주 가이드

여러 이미지를 그리드, 자유형 또는 잡지 스타일의 콜라주로 결합하세요. 간격, 테두리, 배경색 및 가로세로 비율을 조정할 수 있습니다. 모든 작업은 브라우저에서 로컬로 실행되며 서버로 업로드되지 않습니다.

준비물

브라우저 — OffscreenCanvas를 지원하는 Chrome, Firefox, Safari 또는 Edge 형식 — JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP 또는 TIFF 제한 — 파일당 20MB (20MB를 초과하는 파일은 거부됨) 계정 — 필요 없음 인터넷 — 페이지 로드 후 필요 없음

콜라주 만들기

브라우저에서 Image Collage Maker를 엽니다. 파일 탐색기에서 여러 이미지 파일을 드래그하여 업로드 영역에 놓으세요. 또는 업로드 영역을 클릭하여 기기에서 여러 파일을 선택할 수 있습니다.

각 파일은 20MB 제한 미만이어야 하며, 이 기준을 초과하는 파일은 거부됩니다. 레이아웃 유형(그리드, 자유형, 잡지)을 선택하세요. 그리드는 이미지를 균일한 행과 열로 배열합니다.

자유형은 캔버스 어디든 이미지를 드래그하여 배치할 수 있습니다. 잡지 스타일은 혼합된 크기와 위치로 편집 디자인을 적용합니다. 색상 선택기를 사용하여 배경색을 설정하세요.

슬라이더를 사용하여 이미지 간 간격을 조정합니다. 너비와 색상을 설정하여 테두리를 추가하세요. 그리드 레이아웃의 경우 열 수를 선택합니다.

잡지 레이아웃의 경우 캔버스의 가로세로 비율을 조정하세요. 생성 버튼을 클릭합니다. OffscreenCanvas API가 모든 이미지를 단일 캔버스에 합성합니다.

libvips는 레이아웃 선택에 따라 각 이미지를 배치하고, 간격과 테두리를 적용하며, 배경을 채웁니다. 네트워크를 통해 데이터가 전송되지 않습니다. 콜라주가 생성되면 다운로드 버튼이 나타납니다.

클릭하여 기기에 콜라주를 저장하세요. 브라우저가 메모리에서 디스크로 직접 파일을 씁니다. 다운로드 후 libvips는 임시 메모리 버퍼를 자동으로 해제합니다.

작동 원리

Image Collage Maker는 OffscreenCanvas API를 사용하여 여러 이미지를 단일 캔버스에 합성합니다. 이미지를 업로드하면 브라우저가 이를 메모리로 직접 읽어오며, 서버 업로드는 발생하지 않습니다.

libvips는 레이아웃 선택 및 이미지 수에 따라 캔버스 크기를 계산합니다. 그리드 레이아웃의 경우, 총 이미지 수와 열 설정을 기반으로 행과 열 크기를 계산하여 캔버스를 균일한 셀로 나누고 각 셀에 동일한 픽셀 할당량을 보장합니다. 자유형 레이아웃의 경우, 기본 배열을 사용하며 각 이미지를 캔버스 좌표로 드래그하여 수정할 수 있습니다.

잡지 레이아웃의 경우, 혼합된 크기에 대한 편집 규칙을 적용하여 더 큰 이미지는 더 많은 캔버스 영역을 차지하고 작은 이미지는 주변 빈 공간을 채우도록 합니다.

각 이미지는 OffscreenCanvas 렌더링을 사용하여 계산된 위치에 캔버스에 그려집니다. libvips는 셀 경계 사이에 픽셀 간격을 두어 이미지 간 간격을 적용하고, 선택한 너비와 색상으로 사각형을 그려 테두리를 추가하며, 이미지가 합성되기 전에 색상 선택기 값을 채우기 스타일로 사용하여 배경을 채웁니다.

합성 후 libvips는 canvas toBlob 메서드를 사용하여 캔버스를 PNG 또는 JPEG 이미지로 변환하며, 이는 픽셀 데이터를 선택한 이미지 형식으로 인코딩합니다. 결과물인 바이너리 블롭은 URL. createObjectURL을 통해 전달되며, 브라우저가 다운로드를 위해 파일을 제공하는 데 사용하는 임시 메모리 참조 포인터를 생성합니다.

다운로드가 완료되면 libvips는 URL. revokeObjectURL을 호출하여 할당된 메모리를 해제합니다.

파일은 OffscreenCanvas를 사용하여 브라우저 내부에서 완전히 처리됩니다. ConvertCraft 서버로 업로드되지 않습니다. 원본 파일은 기기에 그대로 유지되며, libvips는 이를 메모리로 읽어 콜라주를 합성한 후 다운로드 완료 시 픽셀 버퍼를 삭제합니다.

오류 발생 시

일부 파일 업로드 실패: 해당 파일은 20MB 제한을 초과한 것입니다. OffscreenCanvas는 엄격한 메모리 제한 내에서 작동합니다. 20MB보다 큰 이미지를 처리하려면 RAM에 방대한 압축되지 않은 픽셀 버퍼가 필요하며, 이는 브라우저 탭을 충돌시킬 수 있습니다.

이미지 왜곡: 콜라주 레이아웃은 이미지를 셀에 맞게 조정하므로 가로세로 비율이 왜곡될 수 있습니다. 원본 가로세로 비율 옵션을 사용하거나 이미지에 맞게 셀 크기를 조정하세요.

캔버스가 너무 큼: 고해상도 이미지가 너무 많으면 캔버스가 매우 커집니다. 브라우저 메모리가 부족할 수 있습니다. 이미지 수를 줄이거나 저해상도 소스 파일을 사용하세요.

콜라주 정렬 불량: 그리드 레이아웃은 일관된 크기의 이미지가 필요합니다. 가로세로 비율이 맞지 않으면 간격이 불균일해집니다. 업로드 전에 이미지를 일관된 크기로 자르세요.

### 몇 개의 이미지를 포함할 수 있나요?

실제 제한은 브라우저의 가용 메모리에 따라 다릅니다. libvips는 메모리 제약을 관리하기 위해 이미지를 순차적으로 처리합니다. 속도가 느려지거나 충돌이 발생하면 이미지 수를 줄여보세요.

### 개별 이미지 위치를 조정할 수 있나요?

자유형 레이아웃에서는 각 이미지를 캔버스의 어느 위치로든 드래그할 수 있습니다. 그리드 및 잡지 레이아웃은 고정된 배치 규칙을 사용합니다. 각 이미지 배치를 수동으로 제어하려면 자유형 모드로 전환하세요.

### 출력 파일 형식은 무엇인가요?

콜라주는 기본적으로 무손실 품질을 위해 PNG 이미지로 저장됩니다. 손실 압축을 통해 파일 크기를 줄이려면 JPEG를 선택할 수 있습니다. 형식 선택은 다운로드 전에 가능합니다.