jquery 이미지 자르기 아이디어 및 구현_jquery

아이디어: JS, jquery는 이미지 자르기를 실현할 수 없으며 단지 환상을 표시할 뿐입니다

제가 구현한 방법은 대략 다음과 같습니다.
1. 사용자가 선택한 이미지를 서버에 업로드합니다
2. 선택 이미지 직사각형 프레임의 너비와 높이, 왼쪽 상단의 x, y 좌표, 사진의 높이와 너비 등을 포함하여 사진 속 아바타의 직사각형 프레임 좌표가 서버로 전송됩니다. .
3. 서버에서 얻은 좌표 값과 JAVA를 사용하여 잘라낸 원본 이미지를 사용합니다.
-----------------------------------
imgAreaSelect를 사용하여 jquery 자르기 효과 표시
http://odyniec.net/projects/imgareaselect/
http://www.cnblogs.com/mizzle/archive/2011/10/13/2209891.html
효과는 다음과 같습니다.

JAVA는 이미지 자르기를 실현합니다
http://blog.csdn.net/renfyjava/article/details/9942743
제 예:
4가지 크기의 아바타를 동시에 표시하는데, 부분적으로 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

< script type="text/javascript ">
var $thumb_width = 180; //썸네일 크기
var $thumb_height = 180
function Preview(img, Selection) {
var scaleX = $ Thumb_width / Selection.width;
var scaleY = $thumb_height / Selection.height;
var scaleX2 = 100 / Selection.width;
var scaleY2 = 100 / Selection.height; / Selection.width;
var scaleY3 = 60 / Selection.height;
var scaleX4 = 30 / Selection.width;
var scaleY4 = 30 / Selection.height; #avatar180 img').css({
width: Math.round(scaleX * 300) 'px', //이미지의 실제 너비 가져오기
height: Math.round(scaleY * 300) 'px ', //이미지의 실제 너비를 가져옵니다. Height
marginLeft: '-' Math.round(scaleX * Selection.x1) 'px',
marginTop: '-' Math.round(scaleY * Selection. y1) 'px'
});
$('#avatar100 img').css({
width: Math.round(scaleX2 * 300) 'px', //실제 너비를 가져옵니다. 이미지
height: Math.round(scaleY2 * 300) 'px', //이미지의 실제 높이 가져오기
marginLeft: '-' Math.round(scaleX2 * Selection.x1) 'px',
marginTop: '-' Math.round(scaleY2 * Selection .y1) 'px'
})
$('#avatar60 img').css({
width: Math.round (scaleX3 * 300) 'px', //실제 이미지 가져오기 Width
height: Math.round(scaleY3 * 300) 'px', //이미지의 실제 높이 가져오기
marginLeft: '-' Math.round(scaleX3 * Selection.x1) 'px',
marginTop: '-' Math.round(scaleY3 * Selection.y1) 'px'
})
$('#avatar30 img ').css({
width: Math.round(scaleX4 * 300) 'px', //이미지의 실제 너비 가져오기
height: Math.round(scaleY4 * 300) 'px', / /이미지의 실제 높이 가져오기
marginLeft: '-' Math.round(scaleX4 * Selection.x1) 'px',
marginTop: '-' Math.round(scaleY4 * Selection.y1) 'px '
})
$('#x1').val(선택 .x1)
$('#y1').val(selection.y1); x2').val(selection.x2);
$('#y2') .val(selection.y2)
$('#w').val(selection.width); $('#h').val(selection.height);
}
$(document).ready(function () {
$('#save_thumb').click(function() {
var x1 = $('#x1').val();
var y1 = $('#y1').val()
var x2 = $('#x2'). val();
var y2 = $('#y2').val() ;
var w = $('#w').val()
var h = $('# h').val();
var jyduploadfile = $('#jyduploadfile') .val()
if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || jyduploadfile==""){
alert("먼저 사진을 업로드하도록 선택하세요") return false ;
}else{
return true;
}
})
$(window).load(function () {
$('# picView').imgAreaSelect({ SelectionColor: 'blue', x1:60, y1:60, x2 : 240,
maxWidth:300,minWidth:100,y2:240,minHeight:100,maxHeight:300,
selectionOpacity: 0.2 , 비율: '1:' ($thumb_height/$thumb_width) '', onSelectChange : 미리보기 })
})
디스플레이 효과: