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

대문...이미지...만들어야지...

프로젝트에서 다중 이미지 슬라이더 관련 작업하는 도중 이슈가 발생하였다.

다름 아닌 이미지 크기가 들쭉날쭉인 파일을 여러 개 업로드하다 보면 슬라이더 크기가 천차만별로 변한다는 것...!

object-fit:cover 속성으로 해결하려 했으나... 문제는 각자의 이미지를 잘라내는 부분이 일관성이 있을 리가 없기 때문에

 

"만들어야 했다...."

(앱이면 쉽게 해결할 것을... 웹에서도 해야 돼서...ㅎ)

 

일단 급하게나마 기능적으로 만들어 본 화면이다.

왼쪽이 원본사진, 오른쪽이 기능 구현 한 사진

CSS 꼬락서니에 한번 놀라며... GIF 품질에 다시 한번 놀라며... 포스팅을  작성하겠다

 

이번 작업을 하면서 굉장히 고생했던 건 다름이 아닌 CSS작업이었다. 

원하는 대로 나오질 않아서... CSS 작성한 부분은 모두가 굉장히 야매임을 이해해 주시면 감사하겠..

 

작업에 앞서 필요한 아이들

작업에 앞서 필요한 아이들을 모두 CDN으로 당겨왔다.  jquery, jquery-ui, jquery.ui.touch-punch, html2canvas

여기서 jquery.ui.touch-punch는 드래그 기능에 필요한 draggable를 모바일에서도 작동하게 해주는 고마운 아이이고

html2canvas는 스크립트로 화면을 캡쳐+저장+뽕짝 할 수 있는 라이브러리다

 

기본적으로 생각하고 있는 프로세스는 이미지 확대, 축소, 원본크기로 돌리기, 저장 버튼이 있고

저장 버튼을 누르면  #canvas 안에 보이는 영역에 따라 CROP 하여 BASE64로 해당 이미지를 출력하는 것이다!

( 추후 2탄에서 작성 )

 

주저리주저리 텍스트가 길다. HTML  & CSS

<div class="body" id="aa">
  <img src="./333.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="original">원본 크기</a>
<a href="javascript:void(0);" id="save">저장</a>

 <div id="imgarea"></div>

 

 

#canvas {
	border: 1px black solid;
	z-index: 9999;
	padding:1px;
	pointer-events:none;
}

.body{
	height:490px;
	display:block;
	margin:0 auto;
	overflow:hidden;
	position: relative;
}

#img { 
    position: absolute;
    max-width:750px;
}

#canvas에 pointer-events:none; 부분은 해당 이미지 위에 #canvas라는 DIV가 올라와 있는 판국? 이므로

#canvas에 보이는 이미지를 아무리 드래그하려 해도 #canvas DIV를 주야장천 드래그 하는 것과 같기 때문에

사용한 CSS다.

 

아래는 스크립트 코드이다. 기본적으로 주석은 달았습니다...

//이미지 원래 width
	const imgOriginalWidth = $("#img")[0].width;

	//이미지 원래 height
	const imgOriginalHeight = $("#img")[0].height;

	//현재 이미지 width,height 처음에는 원래 width,height로 
	let imgWidth = imgOriginalWidth;
	let imgHeight = imgOriginalHeight;

	//만들어질 이미지의 width크기를 위해
	let deviceWidth = $(window).width() - 20;

	//canvas로 선택된 이미지 위치 좌표
	let imgTop = 0;
	let imgLeft = 0;

	//375는 넘지말라.
	if(deviceWidth > 375){
		deviceWidth = 375;
	}

	//만들어질 이미지의 높이는 485 고정이다.
	let deviceHeight = 485;


	$(function(){
		$(".body").css("width", deviceWidth);
		$("#canvas").css("width", deviceWidth);
		$("#canvas").css("height", deviceHeight);
		
		//확대버튼 누르면 50px씩 이미지 width를 늘림
		$("#plus").click(function(){
			if(imgWidth == 0){
				imgWidth = imgOriginalWidth;
			}
			imgWidth = imgWidth + 50;
			imgHeight = $("#img")[0].height;
			
			$("#img").css("width", imgWidth);		
		});
		
		//축소버튼을 누르면 50px씩 이미지 width 줄임
		$("#minus").click(function(){
			if(imgWidth == 0){
				imgWidth = imgOriginalWidth;
			}
			if((imgWidth - 50) > deviceWidth){
				imgWidth = imgWidth - 50;
				imgHeight = $("#img")[0].height;
			} else {
				imgWidth = imgWidth - 50;
				imgHeight = $("#img")[0].height;
			}
			if(imgWidth > 100){
				$("#img").css("width", imgWidth);	
			}
		});

		$("#original").click(function(){
			$("#img").css("width", imgOriginalWidth);	
			imgWidth = imgOriginalWidth;
		});

	    $( "#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;
			},
			//드래그 범위
			containment : "",
			//드래그시 드래그 하는 객체의 투명도
			opacity: 0.2
	
		});
	});

 

여기서 draggable코드가 중요한데, #canvas 안에 이미지를 드래그해서 위치를 옮기는데 꼭 필요한 이벤트니까

잘 봐놓으면 좋다.

 

다음에 2편에서 만나요...