[javascript] image resize

<img>의 이미지 크기를 바꿔서 ftp에 업로드 해야하는 경우.
찾아보니 img -> canvas -> img 인 것 같다.

내가 해야하는 것은 업로드한 이미지를 400*300으로 바꿔서 ftp에 업로드 한다.

 

<div class="resize_img" style="display: none">
	<canvas id="canvas0"></canvas>
	<canvas id="canvas1"></canvas>
	<canvas id="canvas2"></canvas>
	<canvas id="canvas3"></canvas>
</div>

//업로드한 이미지를 400*300인 canvas에 draw
	var drawCanvas = function (imageSrc, num) {
		var image = new Image();
		var id = "canvas"+num;
		var canvas = document.getElementById(id);
	
		canvas.width = 400;
		canvas.height = 300;
		canvas.backgroundColor = 'rgb(255, 255, 255)';

		image.src = imageSrc;
		
		image.onload = function(){
			canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
			canvas.getContext("2d").drawImage(image, 0, 0, 400, 300);
		}
	};

캔버스인 상태에서 이미지 업로드를 할 수 없으니,
캔버스를 가져와 이미지파일로 전환시킨 후 업로드.

//캔버스데이터를 blob로 전환
	function dataURItoBlob(dataURI)
	{
		var byteString = atob(dataURI.split(',')[1]);
		var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
		var ab = new ArrayBuffer(byteString.length);
		var ia = new Uint8Array(ab);
		for (var i = 0; i < byteString.length; i++)
		{
			ia[i] = byteString.charCodeAt(i);
		}

		var bb = new Blob([ab], { "type": "image/jpeg" });
		return bb;
	}

	function save(){
    	var form = new FormData();
        form.append('path', path);
        
		for(var i=0; i<4; i++){
				var canvas_id = 'canvas'+i;
				var canvas = document.getElementById(canvas_id); //캔버스 읽어오기
                
				var dataurl = canvas.toDataURL();
				var canvas_blob = dataURItoBlob(dataurl);//캔버스 -> 이미지 파일

				//file.blob -> save_file_name.jpg
				form.append('input_file', canvas_blob, 'save_file_name.jpg');
			}

		ftpUpload(form);

	};

* blob을 이미지로 저장할 때 form에 파일 확장자를 이미지 타입(jpg, png 등)으로 지정해 주어야 한다.

 

..onload나 blob에 대한 부분은 조금 더 찾아봐야 할 것 같다..

 

참고 : https://ysyapr91.tistory.com/3