목적

사용자에게 이미지를 업로드하도록 하는 웹 앱으로 이미지 해상도가 큰 경우 서버측에서 업로드된 이미지의 해상도를 크기 조정하여 저장하는 처리를 구현할 수 있다고 생각합니다.
서버 측이 아니라 클라이언트 측에서 이미지를 크기 조정하는 방법을 조사했습니다.

기능

다음 canvas 메서드를 이용하여 클라이언트 측에서 이미지의 크기를 조정할 수 있습니다.
ctx.drawImage(srcImage, srcX, srcY, srcWidth, srsHeight, dstX, dstY, dstWidth, dstHeight)
첫 번째 인수에 원본 이미지 (Image 객체, 다른 canvas 객체 등을 지정할 수 있음)
제 2, 3, 4, 5 인수에 원 화상으로부터 잘라내는 영역을 지정
제6, 7, 8, 9 인수에 리사이즈 후의 영역을 지정

var scale = 0.5; // 縦横を50%縮小
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var image = new Image();
var reader = new FileReader();
image.crossOrigin = "Anonymous";
image.onload = function(event){
    var dstWidth = this.width * scale;
    var dstHeight = this.height * scale
    canvas.width = dstWidth;
    canvas.height = dstHeight;
    ctx.drawImage(this, 0, 0, this.width, this.height, 0, 0, dstWidth, dstHeight);
    $("#dst").attr('src', canvas.toDataURL());
}
image.src = "https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300"; // 元画像

데모

h tp // js 푹 dぇ. 네 t/게이 k즈 CK/응 ts6로 jh/1/
Chrome에서 마우스 오른쪽 버튼을 클릭하고 '새 탭에서 이미지 열기'를 실행하면 실제 해상도가 축소된 이미지가 표시됩니다.

요약

클라이언트 측에서 이미지를 크기 조정하는 방법을 조사했습니다.
이 방법을 이용하면, 유저가 지정한 파일을 클라이언트측에서 리사이즈 해, 그 후 서버에 업로드 하는 등의 처리가 가능하게 됩니다.