CANVAS 버전 이미지 트리머

이 도구는 이미지를 HTML5 캔버스로 가져오고, 범위를 조절하고 크기를 조절한 뒤 지정된 파일 형식으로 출력하는 이미지 트리머 도구입니다.
처리 흐름에 관해서는,

1. 지정된 디렉터리를 검색하고 이미지 파일만 드롭다운 메뉴에 추가하세요.
2. CANVAS에 로드된 이미지 위에 jQueryUI의 드래그 앤 드롭 박스(div 레이어)를 오버레이합니다.
3. 크롭 버튼을 누르면 X Y 좌표와 div 레이어의 너비를 드래그 앤 드롭하세요.
4. 획득한 좌표와 너비를 원본 이미지의 실제 크기 비율에 맞게 재계산하고, 최종 출력 크기로 자르고 크기를 조정합니다.
5. CANVAS의 toDataURL() 메서드를 사용해 최종 출력 이미지를 텍스트 데이터로 변환하여 Ajax의 PHP에 게시합니다.
6. PHP 측은 수신된 텍스트 데이터를 JPEG/PNG 이진 데이터로 변환하여 지정된 위치로 출력합니다.

HTML5와 JavaScript만으로는 바이너리 파일을 로컬 파일로 출력할 수 없어서 PHP로 처리했습니다.

이미지 파일 관리 도구의 확장으로 개발했지만, 아직 공개되지 않은 프로토타입 도구라 도구 자체는 매우 좋아 보입니다.

사용 코드: HTML5, JavaScript, jQuery, PHP

이미지 트리머

이 도구는 이미지를 HTML5 캔버스로 가져오고, 범위를 조절하고 크기를 조절한 뒤 지정된 파일 형식으로 출력하는 이미지 트리머 도구입니다.
처리 흐름에 관해서는,

1. 지정된 디렉터리를 검색하고 이미지 파일만 드롭다운 메뉴에 추가하세요.
2. CANVAS에 로드된 이미지 위에 jQueryUI의 드래그 앤 드롭 박스(div 레이어)를 오버레이합니다.
3. 크롭 버튼을 누르면 X Y 좌표와 div 레이어의 너비를 드래그 앤 드롭하세요.
4. 획득한 좌표와 너비를 원본 이미지의 실제 크기 비율에 맞게 재계산하고, 최종 출력 크기로 자르고 크기를 조정합니다.
5. CANVAS의 toDataURL() 메서드를 사용해 최종 출력 이미지를 텍스트 데이터로 변환하여 Ajax의 PHP에 게시합니다.
6. PHP 측은 수신된 텍스트 데이터를 JPEG/PNG 이진 데이터로 변환하여 지정된 위치로 출력합니다.

HTML5와 JavaScript만으로는 바이너리 파일을 로컬 파일로 출력할 수 없어서 PHP로 처리했습니다.

이미지 파일 관리 도구의 확장으로 개발했지만, 아직 공개되지 않은 프로토타입 도구라 도구 자체는 매우 좋아 보입니다.

사용 코드: HTML5, JavaScript, jQuery, PHP

이미지 트리머