2013-04-17 2 views
2

페이지가로드 될 때 (사용자 상호 작용없이) 몇 개의 겹치는 캔버스에서 이미지를 생성하지만 완전히 그릴 때까지 3 초가 걸립니다. 이 캔버스를 평평하게하고이 이미지를 서버의 PNG로 변환하여 축소판 미리보기에 사용하고 싶습니다.클라이언트 브라우저가없는 이미지로 HTML 캔버스 저장

ctx.drawImage (other_canvas, 0,0)를 사용하여 단일 캔버스로 병합 한 다음 ctx.toDataUrl()이 필요한 것처럼 보입니다. 이 방법은 서버 쪽 사용자의 브라우저를 요구하지 않고? 페이지를로드 할 수있는 명령 줄 JavaScript/캔버스 파서의 일종, 캔버스가 렌더링을 마칠 때까지 기다린 다음 일부 JavaScript를 병합하여 toDataUrl을 호출하고 결과 이미지의 크기를 조정하고 저장합니다.

축소판을 렌더링하여 서버로 다시 보내는 AJAX 솔루션은 첫 번째 사람이 페이지를보기 전에 미리보기가 필요하므로 작동하지 않습니다. 또한 빨라야합니다 (캔버스가 렌더링하는 데 걸리는 시간 인 3 초보다 약간 길어지기를 바랍니다). 나는 browsershots와 같은 외부 서비스를 기다릴 수 없다.

CutyCapt를 보았지만 캔버스뿐 아니라 전체 웹 페이지를 렌더링합니다. (어떤 이유로 든 내 캔버스에 모든 것을 그릴 수는 없습니다.)

감사합니다.

답변

1

당신은 Phantomjs를 살펴 할 수 있습니다 :이 또한 전체 페이지를 할 것입니다하지만 https://github.com/ariya/phantomjs/wiki/Screen-Capture

이것은 PNG에 HTML 콘텐츠를 렌더링의 좋은 일을한다. 어쩌면 관심있는 캔버스 내용을 별도의 페이지로 래핑 한 다음 phantomjs를 사용하여이를 png로 만들 수 있습니다.

0

PHP는 HTML5 캔버스와 유사한 기능을 제공하는 서버 쪽 이미지 생성을 위해 various libraries입니다.

+0

이 문제에 대해 생각했지만 PHP에서 js 코드를 다시 구현하고 두 버전을 모두 유지해야합니다. – Crashthatch

1

웹툰 브라우저의 명령 줄 버전 인 PhantomJS를 살펴보고 렌더링 된 페이지의 출력을 이미지 등에 저장하는 등의 멋진 작업을 할 수 있습니다. AFAIK를 사용하면 자바 스크립트 코드를 삽입하여 제어력을 높일 수 있습니다 언제 스크린 샷을 찍을 것인가?

http://phantomjs.org/

관련 문제