HTML 및 자바 스크립트의 이미지 위에 "그리기"

사용자가 커서로 "그림을 그려"이미지를 마크 업하는 웹 앱을 만들고 있습니다. 사용자 도면을 가져 와서 서버로 보내 PNG 또는 다른 형식으로 변환하여 저장합니다.HTML 및 자바 스크립트의 이미지 위에 "그리기"

이 앱은 데스크톱 및 태블릿 기반 브라우저에서 모두 작동하므로 Flash, Java, & Silverlight가 출력됩니다. IE8 +, FF, Chrome, & Safari를 지원하고 싶습니다. 거기에 어떤 유형의 원시 MS - 그림판 같은 그리기 기능을 제공 할 것입니다 어떤 유형의 자바 스크립트 라이브러리에 해당 데이터를 서버로 보낼 수 있습니까?

This question도 비슷하지만 유기적 인 인간의 제스처를 인코딩하는 것이지 찾고 싶지는 않습니다.

(아니요. 각기 다른 모바일 플랫폼 용 기본 앱을 만드는 것이 Google의 핵심 역량 또는 예산 내에 있지 않으므로 실행 가능한 대안이 아닙니다.)

출처

2012-04-25 jklemmack

사용자에게 "무언가 그리기"를 요청할 것입니까? –

@ 마이크 - 예. 계약서 이미지를 표시 할 수 있으며 손가락으로 서명하거나 단락을 강조 표시 할 수 있습니다. 또는 건물 사진을 보여주고 일부만 감쌀 수 있습니다. 아이디어는 태블릿에서 손가락으로 "페인트 칠"한 다음 마크 업을 다시 서버에 저장하는 것입니다. – jklemmack

@ MikeRobinson 나는 그 사람이 그를 지나쳤다 고 생각한다. :) –

HTML 캔버스 요소를 사용하거나 Raphael과 같은 SVG 라이브러리를 사용할 수 있습니다. 예 : http://ianli.com/sketchpad/은 Raphael을 사용하는 라이브러리입니다.

출처

2012-04-25 22:58:03

기본적으로 <canvas/> 요소를 사용하여 <img/> 오버레이를 표시하고 사용자가 캔버스에 '페인트'하도록합니다.

페인트 기능은 사용자가 정확히 지정하지 않은 필요한 기능에 따라 달라 지므로이 기능은 도움이 될 수 있습니다.

출처

2012-04-25 22:57:01 Christian

IE8 지원 : http://code.google.com/p/explorercanvas/ – powerbuoy

Raphaël과 같은 벡터 그래픽 렌더링 JavaScript 라이브러리를 사용할 수 있습니다.

Raphaël은 최신 브라우저의 경우 IE (< 9) 또는 SVG 용으로 VML을 사용하여 광범위한 사용자 에이전트를 지원합니다.

출처

2012-04-25 23:00:52

HTML 및 자바 스크립트의 이미지 위에 "그리기"

답변

관련 문제