jquery.Jcrop
<%
Option Explicit
Response.CacheControl = "no-cache"
Response.AddHeader "Pragma", "no-cache"
Response.Expires = -1
Session.CodePage = "949"
Response.Charset ="euc-kr"
Dim isResize, returnCtrlId
returnCtrlId = Request("ReturnCtrlId")
If returnCtrlId = "" Then
Response.write "<script>alert('파라미터가 잘못되어있습니다'); close();</script>"
Response.End
End If
isResize = Request("IsResize")
If isResize = "" Then
isResize = "false"
End If
isResize = LCase(isResize)
%>
<!DOCTYPE html>
<html>
<head>
<title>이미지 선택</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr"" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="/css/jquery.Jcrop.min.css" type="text/css" />
<style type="text/css">
* {border:0;margin:0;padding:0;vertical-align:middle}
.popup_upload_tool {width:600px;font-family:dotum;font-size:12px;line-height:16px;color:#444}
.popup_upload_tool .header_upload_tool {height:35px;background-color:#ff6565}
.popup_upload_tool .header_upload_tool p.title {padding:11px 0 0 15px;font-weight:bold;font-size:14px;color:#fff}
.popup_upload_tool .body_upload_tool {padding:15px}
.body_upload_tool .image_original input[type='file'] {margin-left:10px;width:300px}
.body_upload_tool .image_save {border-top:1px solid #333;margin-top:15px;padding-top:15px}
.body_upload_tool .image_original > label,
.body_upload_tool .image_save > span.title {font-weight:bold}
.body_upload_tool p.image_area {margin:10px 0;padding:10px 0;background-color:#f4f4f4;text-align:center}
.body_upload_tool .btn_area {text-align:center}
.body_upload_tool .btn_area button.btn_on {width:105px;height:33px;background-color:#e63c3c;font-weight:bold;font-family:dotum;font-size:14px;line-height:33px;color:#fff;text-align:center;vertical-align:middle;outline:0;cursor:pointer}
.body_upload_tool .btn_area a.btn_off {display:inline-block;border:1px solid #8d8d8d;margin-right:10px;width:105px;height:31px;background-color:#fff;font-weight:bold;font-family:dotum;font-size:14px;line-height:33px;color:#666;text-decoration:none;text-align:center;vertical-align:middle}
</style>
<script src="/script/Jquery/jquery-1.9.1.js"></script>
<script src="/script/Jquery/jquery.Jcrop.min.js"></script>
<script type="text/javascript">
var imageMinSize = [500, 398];
var coordinate;
var jcrop_api;
var reader;
var isApply;
var isResize = <%=isResize%>;
var returnCtrlId = '<%=returnCtrlId%>';
var canvas;
var imgFileName;
$(document).ready(function() {
//validation
if (!document.getElementById("fileImg").files || !FileReader) {
alert("익스폴로러 10이상 버전에서 가능합니다.");
close();
return false;
}
clearCoords();
//FileReader 초기화
reader = new FileReader();
reader.onload = function (e) {
var target = document.getElementById("target");
target.removeAttribute('style');
target.setAttribute("src", e.target.result);
};
$("#fileImg").on("change", function (e) {
var imgFile = e.target;
var extentsion = imgFile.value.replace(/^.*\./, '').toLowerCase();
if($.inArray(extentsion, ['jpg', 'jpeg', 'png', 'bmp']) == -1) {
alert('jpg, jpeg, bmp, png 파일만 업로드 할수 있습니다.');
return false;
}
clearCoords();
if(jcrop_api) {
jcrop_api.destroy();
}
reader.readAsDataURL(document.getElementById('fileImg').files[0]);
});
$('#target').on('load', function() {
if(this.width < imageMinSize[0] || this.height < imageMinSize[1]) {
this.removeAttribute('src');
alert("원본사이즈가 너무 작습니다.\n가로 " + imageMinSize[0] +"px * " + imageMinSize[1] + "px 이상의 이미지를\n첨부 후 영역을 저장해 주세요.");
return false;
}
imgFileName = document.getElementById('fileImg').files[0].name;
$('#target').Jcrop({
onChange: onChangedCrop,
onSelect: onChangedCrop,
onRelease: clearCoords,
aspectRatio: imageMinSize[0] / imageMinSize[1]
}, function() {
jcrop_api = this;
});
});
canvas = new Array();
canvas[0] = document.getElementById('cLImage');
if(isResize) {
canvas[1] = document.getElementById('cMImage');
canvas[2] = document.getElementById('cSImage');
}
});
function onChangedCrop(c) {
coordinate.x1 = c.x;
coordinate.y1 = c.y;
coordinate.x2 = c.x2;
coordinate.y2 = c.y2;
coordinate.width = c.w;
coordinate.height = c.h;
}
function clearCoords() {
coordinate = {x1: null, y1: null, x2: null, y2: null, width: null, height: null};
}
function saveImage() {
if(!isApply) {
alert("자르기를 해주세요");
return false;
}
if(!opener) {
alert("opener가 존재하지 않습니다.");
return false;
}
if(confirm("적용된 이미지를 사용하겠습니까?")){
var openerCtrlIds = [returnCtrlId + 'L', returnCtrlId + 'M', returnCtrlId + 'S'];
for (var idx in canvas) {
var ctrl = canvas[idx];
var openerCtrl = opener.document.getElementById(openerCtrlIds[idx]);
openerCtrl.value = ctrl.toDataURL("image/jpeg").replace('data:image/jpeg;base64,', '');
}
opener.document.getElementById(returnCtrlId).value = imgFileName;
close();
}
}
function applyImage() {
if(coordinate.x1 == null) {
alert("이미지를 크롭해주세요.");
return false;
}
var img = document.getElementById("target");
for (var idx in canvas) {
var tempCv = canvas[idx];
var context = tempCv.getContext('2d')
context.drawImage(img,coordinate.x1,coordinate.y1,coordinate.width,coordinate.height,0,0,tempCv.width,tempCv.height);
}
isApply = true;
}
</script>
</head>
<body>
<!-- 가로 600px : 가로 사이즈를 늘리고 싶으시면 .popup_upload_tool {width:600px 이 부분을 변경하세요. -->
<div class="popup_upload_tool">
<div class="header_upload_tool">
<p class="title">이미지 업로드 툴</p>
</div>
<div class="body_upload_tool">
<!-- 원본 이미지 -->
<div class="image_original">
<label for="fileImg">원본 이미지</label><input type="file" id="fileImg" />
<p class="image_area"><img id="target" alt="자를 이미지" /></p>
<div class="btn_area">
<button type="button" class="btn_on" onclick="applyImage();">자르기</button>
</div>
</div>
<!-- 저장 이미지 -->
<div class="image_save">
<span class="title">저장 이미지</span>
<p class="image_area">
<canvas id="cLImage" width="500px" height="398px" style="border:1px solid black;"></canvas>
<canvas id="cMImage" width="126px" height="100px" style="display:none;"></canvas>
<canvas id="cSImage" width="88px" height="72px" style="display:none;"></canvas>
</p>
<div class="btn_area">
<a href="#" class="btn_off" onclick="self.close();">닫기</a>
<button type="button" class="btn_on" onclick="return saveImage();">영역 저장</button>
</div>
</div>
</div>
</div>
</body>
</html>
