2014-04-23 2 views
0

과학적인 시각화가 그려지는 단일 캔버스가있는 간단한 HTML5 페이지가 있습니다.HTML5 캔버스가 있습니다. 캔버스의 애니메이션 GIF를 만들고 싶습니다.

캔버스의 X 프레임을 찍고 싶습니다 (키 포인트에서 toDataURL()을 사용했을 가능성이 높음). 이것을 다운로드 할 수있는 애니메이션 GIF로 바꾸고 싶습니다.

다른 방법으로 메시지를 표시하지 않고 DOM에서 이미지를 디스크에 저장하거나 100-200 이미지를 압축하여 메시지를 저장하여 다른 곳에서 GIF로 만들 수있는 좋은 방법입니다.

이 문제에 대한 해결책이 있습니까? 그리고 DOM의 일부인 AVI를 녹음하고 저장하고 프레임을 추출한 다음 GIF로 다시 작성한다는 의미는 아닙니다. 로컬 디스크에
https://github.com/antimatter15/jsgif

저장 영상 메시지를 표시하지 않고 수 없습니다 :

답변

1

가 당신을 위해 그것을 할 수있는 자바 스크립트로 작성된이 라이브러리는,이 애니메이션 GIF를 저장 할 기본 기능 없지만.

  • 사용자가 클릭하여 저장할 수있는 (그리고 위치를 선택하는) 링크를 만듭니다. 최신 브라우저는 앵커 태그 (<a>)의 다운로드 속성을 사용할 수있게합니다. 다운로드 위치를 사용자에게 메시지를 표시하는 헤더에 속성으로
  • 다시 다음 서버로 전송하고

업데이트

그냥 현지 작업에 유용한 호스트로 브라우저를 사용하려면 다음을 수행 할 수 있습니다 항상 이러한 제한을 해제하십시오. 여기에 크롬 :

만 로컬 파일을 사용하려면
chrome.exe --disable-web-security 

:

는 모든 보안 대책이 플래그를 명령 줄에서 크롬을 시작하지 않으려면 (파일 : // 어떤 경우 필요에) :

chrome.exe --allow-file-access-from-files 

나는 이러한 로컬 디스크에 저장 당신을 허용하는 경우 100 % 확실하지 오전하지만 그들은 브라우저 자신의 코드베이스를 수정하지 않고 당신이 얻을만큼 가깝습니다.

희망이 도움이됩니다.

+0

+1. Kevin Kwoks (antimatters)'jsgif '는 캔버스 시퀀스를 gif로 만드는 훌륭한 라이브러리입니다. 그리고 로컬 디스크에 이미지를 저장하는 것이 보안 문제를 야기한다는 것에 동의했습니다. – markE

+0

당신의 디스크가 아니고 실제로 그걸로 뭔가 유용한 것을하고 싶다면 ... –

+0

@AdrianSeeley 이것을 로컬 env와 함께 사용하고 싶다면. 로컬 파일 사용 제한을 무시하는 플래그가있는 Chrome (여기서는 Chrome)을 시작할 수 있습니다 (file : //는 필요 없음). 명령 행에서'chrome.exe --disable-web-security' 또는'chrome.exe --allow-file-access-from-files'과 같은 크롬을 시작하십시오. (업데이트 된 답변) – K3N