JavaScript로 이미지 생성/수정

Question

~하는 것이 가능하니 동적으로 이미지 생성 및 수정 에 픽셀 레벨당 JavaScript로(클라이언트 측에서)?아니면 PHP와 같은 서버 기반 언어로 수행해야 합니까?

내 사용 사례는 다음과 같습니다.

• 사용자가 웹페이지를 열고 로컬에 저장된 이미지를 로드합니다.
• 이미지의 미리보기가 표시됩니다
• 사용자는 일련의 슬라이더를 사용하여 이미지를 수정할 수 있습니다(픽셀 수준 작업).
• 결국 그는 이미지를 자신의 로컬 HDD에 다운로드할 수 있습니다.

웹에서 검색할 때 IE의 필터링 방법 사용에 대한 게시물을 찾았지만 JavaScript의 이미지 편집 기능에 대한 내용은 찾지 못했습니다.

Answer 1

이 작업은 서버 측에서 수행되어야 합니다.당신이 볼 수 있는 한 가지는 모든 편집이 클라이언트 측에서 이루어지도록 허용한 다음 결국 AJAX를 통해 최종 이미지를 서버에 게시하여 올바른 MIME 유형으로 반환할 수 있도록 하는 것입니다. 포장 된.

Answer 2

일부 브라우저는 캔버스를 지원합니다.http://developer.mozilla.org/En/ Drawing_Graphics_with_Canvas

Answer 3

확인해 보세요. 프로세싱.js.jQuery로 유명한 John Resig가 작성했습니다.픽셀 처리를 지원하지만 불행하게도 Firefox 3만이 이를 충분히 처리할 수 있습니다.

Answer 4

또한 보세요 데이터 URI (불행히도 8 이하의 IE 버전은 지원하지 않습니다!)

Answer 5

사용자가 원하는 변환 종류를 정의할 수 있는 JS 도구 세트를 상상할 수 있지만 변환의 최종 작업은 서버 측에서 수행되어야 합니다.보안상의 이유로 클라이언트 측 JS가 파일을 생성할 수 없습니다.

Answer 6

노력하다 Allicorn의 이미지 리타겟터 - 당신이 찾고 있는 게 바로 그 것 같군요.

Answer 7

JavaScript에서 로컬 이미지 조작이 가능해야 합니다. 살펴보세요. 파비콘의 수호자.;-) 문제는 파일 시스템의 원본 이미지를 페이지로 가져오는 방법입니다(먼저 서버에 HTTP 업로드를 수행하는 것 외에 다른 방법은 모르겠습니다).