자바스크립트 이미지 크로퍼

Dave Spurr씨는 Prototype.js와 Scriptaculous기반의 자바스크립트 이미지 크로퍼 UI(유저 인터페이스) 라이브러리를 만들었습니다. 이미지의 특정한 영역을 드래그하여 선택된 영역의 크기와 좌표 값를 반환해 줍니다. 영역을 선택하는데 필요한 모든 UI(잡아끌기, 8방향 늘리고 줄이기)를 제공하며, 최소크기, 비율고정 등의 규칙을 부여하고, 미리보기(Preview) 창을 열수도 있습니다. 데모 페이지에서 직접 사용해 보세요. ImageMagick 또는 GD library와 연동하여 프로파일 이미지 크롭, 블로그 포토 크롭 등을 Ajax로 구현할 수 있겠습니다. 참고로 , 이 라이브러리는 올라로그의 프로파일 이미지 크롭에 실제로 사용되고 있는 라이브러리이기도 합니다. 예제 :     function onEndCrop( coords, dimensions ) {       $( 'x1' ).value = coords.x1;       $( 'y1' ).value = coords.y1;       $( 'x2' ).value = coords.x2;       $( 'y2' ).value = coords.y2;       $( 'width' ).value = dimensions.width;       $( 'height' ).value = dimensions.height;    }    new Cropper.Img('testImage', { onEndCrop: onEndCrop });