사용자가 이미지를 업로드하도록 한 다음 설정된 크기로 잘립니다. 내가 원했던 것은 본질적으로 특정 작물 크기와 그 상자 안의 이미지로 설정된 div입니다. 그러면 사용자는 이미지를 슬라이드 할 수 있으며 해당 div에서 볼 수있는 것이 무엇이든지 이미지가 잘리는 부분입니다.jquery로 이미지 자르기
내가 만났던 jquery 플러그인은 모두 사용자가 선택 상자를 전체 이미지 주변으로 이동시키고 선택 상자 뒤 이미지는 이동하지 못하도록합니다. 이런 종류의 것이 존재하고 방금 플러그인을 놓친 적이 있습니까?
기본적으로 페이스 북에서 이미지를 축소판 크기의 상자로 드래그하는 축소판 편집기와 비슷할 것입니다.
정말 플러그인을 필요로하지 않습니다. 이것은 background-position 값을 설정하여 vanilla jQuery와 CSS로 수행 할 수 있습니다.
<div id="CroppedImageDiv"></div>
<script type="text/javascript">
function cropImage(imgUrl, cropWidth, cropHeight, cropStartX, cropStartY) {
var bgPos = cropStartX + "px " + cropStartY + "px";
$('#CroppedImageDiv').width(cropWidth).height(cropheight).css('background-position', bgPos);
$('#CroppedImageDiv').css('background-url', imgUrl);
}
</script>
JCrop 플러그인을 사용할 수 있습니다. 내가 "단두대"을 권 해드립니다 것이다
감사하지만 jcrop 플러그인을 사용하면 포함 된 이미지 내에서 이미지를 움직일 수 없습니다 선택 상자. – nbu
는 : http://github.com/matiasgagliano/guillotine
그것은 당신이 요구하는 단지 무엇을 수행하는 jQuery 플러그인, 그것은 또한 회전과 줌에 발생합니다.
터치 장치를 지원하며 반응 적입니다.
체크 아웃 데모 : http://matiasgagliano.github.io/guillotine이 바로 나에게하지만, aroung 이미지를 드래그 할 수있는 기능을 제공하지 않습니다
? 이것은 최종 이미지 작물을 결정하는 것일뿐입니다. 죄송합니다, 저는 자바 스크립트/jquery 초보자입니다. – nbu
예,이 코드는 마지막 자른 이미지를 DIV에 표시합니다. 실제 자르기 작업을 위해 Jcrop 코드를 살펴볼 수도 있지만 jQuery 초보자에게는 어려울 수 있습니다 ... –