HTML5에서 폼(form)을 제출하기 전에 이미지 크기를 조정하려면 Canvas API의 drawImage() 메서드를 활용해야 합니다. 이 방법을 사용하면 원본 이미지를 원하는 크기로 축소하거나 확대한 뒤, 그 결과를 캔버스에 그려서 제출할 수 있습니다.
drawImage() 메서드로 이미지 축소하기
원본 이미지를 지정한 배율(Scale)만큼 축소하고, 축소된 버전을 캔버스의 좌표 [0, 0] 위치에 그리는 기본 코드는 다음과 같습니다.
context.drawImage( img, 0, 0, img.width, img.height, 0, 0, myWidth, myHeight );
코드 파라미터 설명
drawImage() 메서드는 총 9개의 인자를 받습니다.
- img: 크기를 조정할 원본 이미지 객체
- 0, 0: 원본 이미지에서 잘라낼 영역의 시작 좌표 (x, y)
- img.width, img.height: 잘라낼 원본 영역의 너비와 높이 (전체 이미지 사용)
- 0, 0: 캔버스 위에 그릴 위치의 시작 좌표 (x, y)
- myWidth, myHeight: 캔버스에 그려질 최종 이미지의 너비와 높이
조정된 크기 계산하기
위 코드에서 사용된 myWidth와 myHeight는 원본 이미지 크기에 배율(Scale)을 곱하여 계산합니다. 소수점 오류를 방지하기 위해 Math.floor()로 정수 처리합니다.
var myWidth = Math.floor( img.width * Scale ); var myHeight = Math.floor( img.height * Scale );
이미지를 화면 중앙에 배치하기
축소된 이미지를 캔버스나 화면(world)의 정중앙에 배치하고 싶다면, 남는 공간의 절반만큼 오프셋을 계산하면 됩니다.
var x = Math.floor( ( world.width - myWidth ) / 2 ); var y = Math.floor( ( world.height - myHeight ) / 2 );
이렇게 계산된 x, y 값을 drawImage()의 대상 좌표로 전달하면 이미지가 항상 중앙에 정렬되어 표시됩니다.
마무리
이 기법은 특히 사용자가 업로드할 이미지를 클라이언트 측에서 미리 축소해 서버 전송량을 줄일 때 매우 유용합니다. 파일 입력 요소로 이미지를 불러온 뒤 캔버스에 그리고, toDataURL() 또는 toBlob()으로 변환하여 폼과 함께 제출하면 됩니다.