jQuery & html2canvas 웹에서 원하는 부분의 이미지를 잘라 저장하자! -2-

오늘은 저번에 만들던 이미지를 잘라 저장하기 챕터2 (완) 되시겠다.

몇일의 텀이 있어 저번 글이 기억이 안나시면 살포시 아래 링크 한번만 들어가주십사...^_____^

https://ddorm.tistory.com/10

jQuery & html2canvas 웹에서 원하는 부분의 이미지를 잘라 저장하자! -1-

짜놓고 보아하니... 보이는 이미지를 365px로 잘라냈더니 이미지가 굉장히 작고 화질 또 한 엉망이었기때문에 

조금의 기능 개선이 있었다. 

아래는 스크립트 코드이다. 3:4비율로 canvas를 고정시키고 

보여지는 이미지에서 384x464크기로 이미지를 자른후 canvas에서 3배 확대된 사이즈를 3배 크게 잘라 이미지 크기를 키우려는게 목적이다.

const imgOriginalWidth = $("#img")[0].width;
const imgOriginalHeight = $("#img")[0].height;

//console.log(imgOriginalWidth); 
let imgWidth = imgOriginalWidth;
let imgHeight = imgOriginalHeight;

//html2canvas에서 사용될 너비 변수 3:4 비율로 잡아놓음.
let deviceWidth = 363;	
let deviceHeight = 484;

//html2canvas로 잘라낼 좌표변수
let imgTop = 0;
let imgLeft = 0;

//363px로 이미지크기를 잡았을경우 너무 이미지가 작아 표시할때 화질이 너무 안좋다.
//보여지는 이미지 3배의 크기로 canvas를 넓힌 후 잘라낼 예정
//즉 잘라낼때의 이미지 범위는 363x484겠지만 만들어지는 이미지의 크기는 1089 x 1452가 된다. 
deviceWidth = 363*3;
deviceHeight  = 484*3;

$(function(){
	//확대버튼 누르면 50px씩 이미지 width를 늘림
	$("#plus").click(function(){
		if(imgWidth == 0){
			imgWidth = $("#img")[0].width;
		}
		imgWidth = imgWidth + 50;		
		imgHeight = $("#img")[0].height;
		
		$("#img").css("width", imgWidth);		
	});
	//축소버튼을 누르면 50px씩 이미지 width 줄임
	$("#minus").click(function(){
		if(imgWidth == 0){
			imgWidth = $("#img")[0].width;
		}
        imgWidth = imgWidth - 50;
        imgHeight = $("#img")[0].height;
		
		if(imgWidth > 100){
			$("#img").css("width", imgWidth);	
		}
	});
	//이미지 드래그 실행가능
	$( "#img" ).draggable({
	drag: function( event, ui ) {
    	//드래그 중 좌표를 업데이트한다. (안써도될...)
		imgTop = ui.position.top * -1;
		imgLeft = ui.position.left * -1;
	},
	stop: function(event, ui){
    	//드래그 끝나고 놓을때 이동한 좌표를 가져온다.
		 imgTop = ui.position.top * -1;
		 imgLeft = ui.position.left * -1;
	 },
	opacity: 0.2
	});
});

CSS

#canvas {
    border: 1px black solid;
    z-index: 9999;
    opacity:0.7;
    padding:1px;
    pointer-events:none;
    margin:0 auto;
    width:363px;
    height:484px;
}
.body{
    /*height:490px;*/
    display:block;
    margin:0 auto;
    overflow:hidden;
    position: relative;
    height:490px;
 }
#img { 
    position: absolute;
    width:100%;
    max-width:800px;
}
.scroll::-webkit-scrollbar {
  display: none;
}

HTML

<h2>사진을 움직여 조절하세요.</h2>

<div class="body">
	<img src="./ddorm.jpg" id="img" >
	<div id="canvas"></div>
</div>
<a href="javascript:void(0);" id="plus">이미지 확대</a>
<a href="javascript:void(0);" id="minus">이미지 축소</a>
<a href="javascript:void(0);" id="save">저장</a>
<div id="imgarea"></div>

 

이제 본격적으로 html2canvas 라이브러리를 사용 한 부분이다.

$("#save").on("click", function() {
	var width = $("#canvas")[0].offsetWidth;
	var height = $("#canvas")[0].offsetHeight;
	//canvas위치와 이미지 시작위치 사이의 간극 계산.
	var getCanvasMoveLeft = parseInt($(".body")[0].clientWidth - 363) / 2;

	//scale:3을 줌으로써 3배크기의 이미지를 구함.
	html2canvas(document.getElementById("img"), { scale:3 }).then(function(canvas) {  //전체 화면 캡쳐

		///getImageData로 선택영역의 이미지를 가져온다. 3배 크기이기 때문에 자를 좌표의 위치는 3배씩 늘려서 저장해야 제대로 저장이 된다.
		var img = canvas.getContext('2d').getImageData((imgLeft+getCanvasMoveLeft)*3, imgTop*3, deviceWidth, deviceHeight); 
		//빈 canvas 객체를 만든다.
		var c = document.createElement("canvas");
		//canvas 객체 크기 지정
		c.width = deviceWidth;
		c.height = deviceHeight;
		//만들어놓은 canvas객체에 crop한 이미지를 가져온다.
		c.getContext('2d').putImageData(img, 0, 0);
		save(c);  //이미지 저장
	});
});


function save(canvas) {  //저장
	//toDataUrL 함수로 이미지를 base64로 가져온다. 이때 뒤쪽의 매개변수 1은 화질을 뜻함.
	var img_ = $("<img>");
	img_.attr("src",canvas.toDataURL("image/png", 1));
	img_.css("width", "363px");
	$("#imgarea").html(img_); 
	
	//아래는 이미지 다운로드
	/* var el = document.createElement("a")
		el.href = canvas.toDataURL("image/png", 1);
		el.download = '이미지.jpg' //다운로드 할 파일명 설정
		el.click()
	*/

}

3배로 이미지를 키워 저장을 하니 1089x1452px의 3:4 이미지가 잘 저장되었다.

여기서html2canvas.js scale 옵션은 반응형에서나 모바일에서 굉장히 중요한 옵션이므로 꼭꼭 알아두면 좋을듯 하다.

끗!