이미지 회전
90°/180°/270° 회전, 자유 각도 회전, 좌우·상하 반전
이미지를 드래그하거나 클릭하여 업로드
📖 정각이 아닌 각도로 회전하면 캔버스가 왜 커지는가 가이드 보기
이미지 회전 도구
이 도구는 임의 각도 회전 시 이미지가 잘리지 않도록 캔버스 크기 자체를 회전된 이미지의 바운딩 박스에 맞춰 동적으로 계산합니다. 예를 들어 정사각형이 아닌 이미지를 45도 회전하면 결과물의 가로세로 크기가 원본보다 커지는데, 이는 cos·sin 삼각함수로 회전된 사각형이 차지하는 실제 폭과 높이를 구해 캔버스에 반영하기 때문입니다. 90°·180°·270° 같은 정각 회전은 이미지가 잘리지 않지만, 그 외의 임의 각도로 회전하면 네 모서리 바깥쪽에 빈 공간이 생기며 이 부분은 투명하게 처리됩니다. 세로로 찍힌 사진을 바로 세우거나, 좌우가 반대로 찍힌 셀카를 뒤집거나, 스캔한 문서의 기울어진 각도를 미세 조정할 때 활용됩니다.
자주 묻는 질문
지원 형식은?
브라우저의 Image 객체가 디코딩할 수 있는 모든 형식을 지원합니다. PNG, JPG, WebP는 물론 GIF도 첫 프레임 기준으로 불러올 수 있습니다.
자유 각도 회전이 가능한가요?
네. 슬라이더나 숫자 입력란으로 0~360° 사이의 임의 각도를 1° 단위로 지정할 수 있으며, 값을 바꿀 때마다 미리보기가 즉시 갱신됩니다.
좌우·상하 반전이란?
Canvas의 scale(-1,1) 또는 scale(1,-1) 변환을 이용한 거울 반전입니다. 좌우 반전은 이미지를 세로축 기준으로, 상하 반전은 가로축 기준으로 뒤집습니다. 얼굴이 좌우 반전되어 찍히는 셀카 카메라의 이미지를 원래대로 되돌릴 때 특히 유용합니다.
파일이 서버로 전송되나요?
아니요. 회전·반전 연산이 모두 Canvas API를 통해 브라우저 안에서 실행되므로 원본 이미지가 외부로 전송되지 않습니다.
출력 형식은?
Canvas.toDataURL('image/png')로 PNG 파일이 생성됩니다. 임의 각도 회전 시 생기는 투명 영역까지 정확히 표현하려면 알파 채널을 지원하는 PNG가 필수입니다.
자유 각도 회전 시 빈 공간은?
회전된 사각형의 바운딩 박스와 원본 이미지 사이의 틈으로, 알파값 0의 완전 투명 픽셀로 채워집니다. JPG 등 투명도를 지원하지 않는 곳에 붙여넣으면 흰색이나 검은색 배경으로 보일 수 있습니다.
반전과 회전을 동시에 적용할 수 있나요?
네. 내부적으로 translate → rotate → scale(반전) → drawImage 순서로 Canvas 변환 행렬이 누적 적용되므로, 반전과 회전을 원하는 순서로 여러 번 조합해도 정확하게 반영됩니다.
원래대로 되돌리려면?
각도 값을 0으로 설정하고, 좌우·상하 반전을 홀수 번 눌렀다면 같은 버튼을 한 번 더 눌러 짝수로 맞추면 원본과 동일한 상태로 돌아옵니다.