2009-05-27 10 views
6

HTML 캔버스 요소의 내용에서 이미지 데이터를 생성하는 가장 좋은 방법은 무엇입니까?HTML 캔버스 요소에서 이미지 데이터 생성

이미지 데이터를 서버로 전송할 수 있도록 작성하고 싶습니다. 사용자가 직접 파일에 저장할 필요가 없습니다. 이미지 데이터는 PNG 또는 JPEG와 같은 공통 형식이어야합니다.

여러 브라우저에서 올바르게 작동하는 솔루션이 권장되지만 모든 솔루션이 브라우저에 따라 다르면 최신 버전의 Firefox를 대상으로해야합니다.

답변

2

내가 사용할 수있는 lib는 Canvas2Image이라고 생각합니다. Canvas의 기본 기능을 사용하지만 모든 브라우저에서 작동하지 않습니다. 나는이 lib의 최적화 된 버전을 원한다면, 나는 그것을 당신과 공유 할 것이다.

그러면 생성 된 Data URI을 가져와 Ajax를 사용하여 서버로 보낼 수 있습니다.

+0

고마워, 그게 내가 원하는 것 같아. 나는 최적화 된 버전을 주시면 감사하겠습니다. 내 프로필에있는 내 웹 사이트를 방문하면 내 이메일 주소를 찾을 수 있습니다. – Doug

+0

문제가 없습니다! http://flotr.googlecode.com/svn/trunk/flotr/flotr/prototype/lib/canvas2image.js 알파 채널과 몇 가지 속도 최적화를 사용하도록 BMP 렌더링을 변경했습니다. 사실 나는 무료 라이브러리에서 작업 중이므로 자유롭고 항상 유용 할 것입니다. –

+0

고마워, 많이! 내가 계획하고있는 프로젝트는 주로 개인적인 용도로 사용되기 때문에 소스를 자유롭게 사용할 수있게 될 것입니다. – Doug

4

Firefox와 Opera에는 데이터 URL 형식의 PNG를 반환하는 toDataURL() 메서드가 있습니다. 결과를 양식 필드에 지정하여 서버에 제출할 수 있습니다.

데이터 URL은 base-64로 인코딩되어 있으므로 서버 측에서 디코딩해야합니다. 또한 "data : image/png;"를 삭제해야합니다. 물론.