jQuery jcrop 플러그인을 사용하여 스크린샷을 찍는 방법_jquery

배경에서 이미지를 잘라냅니다.
아바타 가로채기 원리: 프런트 데스크에서 jcrop을 사용하여 x축 좌표, y축 좌표, 슬라이스 높이, 슬라이스 너비를 얻은 후 이 4가지 값을 백엔드에 전달합니다.
. 백그라운드에서 증폭 처리가 필요합니다. 섹션을 N 배 확대하고, N=원본 이미지/프론트에 표시되는 아바타입니다. 즉, X = 높음입니다.
예:
JSP:

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

< input type="hidden" id="bigImage" name="bigImage"/>

< ;input type ="hidden" id="y" name="y" />

 

 

스타일: 크고 작은 사진 모두 배경에서 확대해야 하므로 높이와 너비가 고정되어 있어야 합니다. 즉,

그런 다음 jcrop을 사용하세요. jcrop을 사용하기 전에 jcrop을 다운로드해야 합니다: http://deepliquid.com/content/Jcrop.html.
다운로드한 압축 패키지의 압축을 풀면 3개의 폴더와 index.html 파일이 보입니다. /css 아래에 Jcorp의 스타일 파일이 있고, /demo 아래에 몇 가지 간단한 예제(index.html)가 있습니다. 이 폴더에 위치), Jcorp에서 가장 중요한 스크립트 파일은 /js 아래에 위치합니다. 세 가지 파일만 사용하면 됩니다: jquery.Jcrop.css, jquery.Jcrop.js, JQuery.js
사용법:

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

//이미지 자르기
cutImage 기능 (){
$("#srcImg").Jcrop( {
가로세로 비율 : 1,
onChange : showCoords,
onSelect : showCoords,
minSize :[200,200]
} );
//간단한 이벤트 핸들러, onChange, onSelect 이벤트에 응답,
함수 showCoords(obj) {
$("#x").val(obj.x); $("#y").val(obj.y);
$("#w").val(obj.w);
$("#h").val( obj.h);
if (parseInt(obj.w) > 0) {
//표시 영역의 너비(및 높이)와 너비를 계산하여 미리보기 영역 이미지의 확대/축소 비율을 계산합니다. 클리핑의 (및 높이) 비율은
var rx = $("#preview_box").width() / obj.w;
var ry = $("#preview_box").height() / obj.h;
//비율 값을 통해 이미지의 스타일 및 표시 제어
$("#previewImg").css( {
                                                                                                                                               /      ", //미리보기 이미지의 너비는 다음과 같습니다. 계산된 비율 값과 원본 이미지 너비의 곱
height : Math.round(rx * $("#srcImg").height()) "px", //미리보기 이미지의 높이는 원본 이미지의 비율 값과 높이의 곱을 계산합니다
marginLeft: "-" Math.round(rx * obj.x) "px",
marginTop: "-" Math.round(ry * obj.y) " px"
});
}
}
}

jcrop을 사용하기 전에 $("").jcrop();을 사전 초기화해야 합니다. 그렇지 않으면 아무런 효과가 없습니다. 또 다른 전화 방법이 있습니다.

 

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

var api = $.Jcrop('# Cropbox', {

onChange: showPreview,
onSelect: showPreview,
비율: 1
});

이 방법은 Jcrop에서 생성된 객체를 전역 변수에 할당하는 방법으로 작업이 더 편리해집니다.
위 js를 통해 X축 좌표, Y축 좌표, 높이 H, 너비 W의 4가지 값을 배경으로 전달하고 이를 기반으로 배경만 확대하고 잘라내면 됩니다. 네 가지 가치 ​​​​
그게 다입니다.

액션

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

/**
* 아바타 자르기
*/
public String cutImage(){
/*
* 매개변수 가져오기
* x,y,w,h,bigImage
*/
HttpServletRequest 요청 = (HttpServletRequest) ActionContext.getContext ().get(ServletActionContext.HTTP_REQUEST);
int x = Integer.valueOf(request.getParameter("x"));
int y = Integer.valueOf(request.getParameter("y") ));
int w = Integer.valueOf(request.getParameter("w"));
int h = Integer.valueOf(request.getParameter("h"));
String bigImage = 요청 .getParameter( "bigImage");

//파일의 실제 경로 가져오기
//파일 이름 가져오기
String[] imageNameS = bigImage.split("/");
String imageName = imageNameS[ imageNameS.length-1];
//파일의 공식 경로
String imagePath = getSavePath() "\" imageName;

//이미지 잘라내기
ImageCut imageCut = new ImageCut();
imageCut.cutImage(imagePath, x, y, w, h);

//아바타를 자른 후 이미지 경로를 사용자에게 저장
UserBean userBean = (UserBean) request.getSession( ).getAttribute("userBean");
userBean.setUserPhoto(bigImage);
//아바타 저장
UserCenterService centerService = new UserCenterService();
centerService.updatePhoto(userBean);
//수정된 사용자를 세션에 저장
request.getSession().setAttribute("userBean", userBean);

return "updatePhoto";
}
}

이미지 자르기 도구 클래스: ImageCut.java

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

public class ImageCut {

/* *
* 이미지 자르기
* @param imagePath 원본 이미지 주소
* @param x 대상 슬라이스 좌표 X축 시작점
* @param y 대상 슬라이스 좌표 Y축 시작점
* @param w 대상 슬라이스 너비
* @param h 대상 슬라이스 높이
*/
public void cutImage(String imagePath, int x,int y,int w,int h){
try {
Image img;
ImageFilter CropFilter;
/ / 소스 이미지 읽기
BufferedImage bi = ImageIO.read(new File(imagePath));
int srcWidth = bi.getWidth(); // 소스 이미지 너비
int srcHeight = bi.getHeight () ; // 소스 이미지 높이

// 원본 이미지 크기가 슬라이스 크기보다 크면 잘라냅니다.
if (srcWidth >= w && srcHeight >= h) {
이미지 이미지 = bi.getScaledInstance(srcWidth, srcHeight,Image.SCALE_DEFAULT);

int x1 = x*srcWidth/400;
int y1 = y*srcHeight/270;
int w1 = w*srcWidth/400;
int h1 = h*srcHeight/270;

CropFilter = new CropImageFilter(x1, y1, w1, h1);
img = Toolkit.getDefaultToolkit().createImage (new FilteredImageSource(image.getSource(), CropFilter));
BufferedImage 태그 = new BufferedImage(w1, h1,BufferedImage.TYPE_INT_RGB);
그래픽 g = tag.getGraphics();
g.drawImage (img, 0, 0 , null); // 축소된 이미지 그리기
g.dispose();
// 파일로 출력
ImageIO.write(tag, "JPEG", new File( imagePath));
}
} catch(IOException e) {
e.printStackTrace();
}
}
}