현대마법의 IT공방 :: [jQuery] JCROP을 이용한 이미지 자르기

[jQuery] JCROP을 이용한 이미지 자르기 - Sample[jQuery] JCROP을 이용한 이미지 자르기 - Sample

Posted at 2020. 2. 11. 13:29 | Posted in JavaScript & jQuery/jQuery

Jcrop 다운 : http://deepliquid.com/content/Jcrop.html

Jcrop API : https://jcrop.com/

GitHub : https://github.com/tapmodo/Jcrop

■ JCROP을 이용한 업로드한 크롭( CROP ) 하기

웹 브라우저 상에서 이미지를 업로드하고, 해당 이미지를 편집 하는 기능을 제작하게 되었다.

HTML5의 캔버스를 통해 업로드한 이미지를 똑같이 복사하여, 작업영역을 만들고.

캔버스에서 작업이 완료된 그림을 다시 원본 이미지와 교체하는형태로 서버에 업로드 하지 않고 작업하는것을 마무리 하였다.

# 소스코드

<html>
<head>
<meta charset="UTF-8">
<title>:: JavaScript 캔버스 이미지 업로드 ::</title>
<meta name="viewport" content="width=device-width">
<link type="text/css" rel="stylesheet" href="./css/modern.css"/>
<link type="text/css" rel="stylesheet" href="http://jcrop-cdn.tapmodo.com/v0.9.12/css/jquery.Jcrop.min.css"/>
<style type="text/css">
.imgArea { text-align:center; }
canvas, #uploadFile, #editBtn, #cutBtn { display:none; }
body { overflow:hidden };
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="http://jcrop-cdn.tapmodo.com/v0.9.12/js/jquery.Jcrop.min.js"></script>
<script type="text/javascript">

let jcropApi = null;

  // @breif 이미지 크롭 영역지정 UI 나타내기
function imgCropDesignate() {

let editWidth = jQuery("#editImg").width();
let editHeight = jQuery("#editImg").height();

// @breif jcrop 실행시 크롭영역을 미리 세팅
let x1 = window.screen.width / 2 - editWidth;
let y1 = window.screen.height / 2 - editHeight;
let x2 = editWidth / 1.5;
let y2 = editHeight / 1.5;

// @breif jcrop 실행
jQuery("#editImg").Jcrop({
bgFade : true
, bgOpacity : .2
, setSelect : [ x1, y1, x2, y2 ]
, onSelect : updateCoords
}, function() {
jcropApi = this;
});

jQuery("#editBtn").css("display", "none");
jQuery("#cutBtn").css("display", "inline");
}

  // @breif 지정된 크롭 한 영역( 좌표, 넓이, 높이 )의 값을 보관하는 함수
function updateCoords(crap) {
jQuery("#xAxis").val(crap.x);
jQuery("#yAxis").val(crap.y);
jQuery("#wLength").val(crap.w);
jQuery("#hLength").val(crap.h);
}

  // @breif 크롭한 영역 잘라내고 추출하기
function imgCropApply() {

if(parseInt(jQuery("#wLength").val()) == "NaN") {
alert("이미지를 크롭한 이후\n자르기 버튼을 클릭하세요.");
return false;
} else {

      let editImage = new Image();
editImage.src = jQuery("#editImg").attr("src");

editImage.onload = function() {

// @breif 캔버스 위에 이미지 그리기
let canvas = document.querySelector("canvas");
let canvasContext = canvas.getContext("2d");

// @breif 캔버스 크기를 이미지 크기와 동일하게 지정
canvas.width = jQuery("#wLength").val();
canvas.height = jQuery("#hLength").val();

canvasContext.drawImage(
this
, jQuery("#xAxis").val()       // 자르기를 시작할 x좌표
, jQuery("#yAxis").val()       // 자르기를 시작할 y좌표
, jQuery("#wLength").val()   // 잘라낸 이미지의 넓이
, jQuery("#hLength").val()   // 잘라낸 이미지의 높이
, 0      // 캔버스에 이미지를 배치할 x좌표
, 0      // 캔버스에 이미지를 배치할 y좌표
, jQuery("#wLength").val()   // 사용할 이미지의 넓이(이미지 스트레칭 또는 축소)
, jQuery("#hLength").val()   // 사용할 이미지의 높이(이미지 스트레칭 또는 축소)
);

// @breif 편집한 캔버스의 이미지를 화면에 출력한다.
let dataURI = canvas.toDataURL("image/jpeg");
jQuery("#editImg").attr("src", dataURI);

// @breif 이미지의 크기는 자른 이미지와 동일하게 지정
jQuery("#editImg").css("width", jQuery("#wLength").val());
jQuery("#editImg").css("height", jQuery("#hLength").val());
};

      jQuery("#cutBtn").css("display", "none");

// @details JCROP을 종료한다.
      jcropApi.destroy();
  jcropApi = null;
}
}

// @breif 이미지 업로드 함수
function uploadImgFilePrinted() {

// @details 업로드 파일 정보를 받아온다.
let fileInfo = document.getElementById("uploadFile").files[0];
let reader = new FileReader();

reader.onload = function() {

// @details 업로드 이미지 출력
jQuery("#editImg").attr("src", reader.result);

// @details 이미지 크기를 제목 영영과 같게 출력
jQuery("#editImg").css("width", jQuery("h1").width());

// @details 이미지 업로드 기능 제거, 추가 업로드 방지
jQuery("#editImg").parent("a").removeAttr("onClick");

// @details 편집버튼 노출
jQuery("#editBtn").css("display", "inline");

canvasDrawImage(function() {
alert("이미지 업로드가 완료되었습니다.");
});
};

if(fileInfo) {
// @details readAsDataURL을 통해 업로드한 파일의 URL을 읽어 들인다.
reader.readAsDataURL(fileInfo);
}
}

// @breif 캔버스 이미지 생성
function canvasDrawImage(callback) {

let prepImage = new Image();
prepImage.src = jQuery("#editImg").attr("src");

prepImage.onload = function() {

// @details 캔버스 위에 이미지 그리기
  // jQuery("canvas") 와같은 명령은 사용할 수 없다.
let canvas = document.querySelector("canvas");
let canvasContext = canvas.getContext("2d");

canvas.width = jQuery("#editImg").width();
canvas.height = jQuery("#editImg").height();
canvasContext.drawImage(this, 0, 0, jQuery("#editImg").width(), jQuery("#editImg").height());

  // @details 캔버스의 이미지
let dataURI = canvas.toDataURL("image/jpeg");
jQuery("#editImg").attr("src", dataURI);

callback();
};
}
</script>
</head>
<body>
<input type="hidden" id="xAxis" value="0" placeholder="선택영여역의_x좌표"/>
<input type="hidden" id="yAxis" value="0" placeholder="선택영여역의_y좌표"/>
<input type="hidden" id="wLength" value="0" placeholder="선택영여역의_w넓이"/>
<input type="hidden" id="hLength" value="0" placeholder="선택영여역의_h높이"/>
<input type="file" id="uploadFile" onChange="uploadImgFilePrinted();" accept="image/*"/>
<div class="contents">
<h1>이미지 자르기<span>샘플</span></h1>
<div class="imgArea">
<a href="javascript:;" onClick="jQuery('#uploadFile').click();">
<img id="editImg" src="./user-anonymous.png"/>
</a>
<br/><br/>
<input id="editBtn" type="button" onClick="imgCropDesignate();" value="편집"/>
<input id="cutBtn" type="button" onClick="imgCropApply();" value="자르기"/>
</div>
<canvas></canvas>
<div class="copyright" style="bottom:0;">
<p>Producer © 사악미소</p>
</div>
</div>
</body>
</html>

# 출력결과

관련포스팅#01 : [JavaScript] 이미지 파일 썸네일 생성하기

관련포스팅#02 : [JavaScript] Canvas를 통한 이미지 회전

관련포스팅#04 : [jQuery] JCROP을 이용한 이미지 자르기 - Sample

저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] TextBox에서 다중 선택 기능 제작 (0)	2020.07.24
[jQuery] load( ) 메소드를 이용한 외부 데이터의 페이지 반영 (0)	2020.03.02
[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작 (0)	2019.06.18
[jQuery] 팝업 창 외에 다른 항목 클릭 막기 (0)	2019.06.04
[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기 (7)	2019.01.31

[jQuery] JCROP을 이용한 이미지 자르기 - Sample[jQuery] JCROP을 이용한 이미지 자르기 - Sample

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

CategoryCategory

Recent PostRecent Post

Recent CommentRecent Comment

Recent TrackbackRecent Trackback

Tag CloudTag Cloud

ArchiveArchive

LinkLink

티스토리툴바