구성 요소의 HTML5 스크린 샷

Question

자바 스크립트에서 DOM 요소의 스크린 샷을 찍은 다음 스크린 샷 이미지를 파일에 저장하는 방법이 있으면 궁금합니다. (예를 들어 테스트 목적으로 ... 예, 나는 Selendroid, QF-Test, Sikuli, Sandstorm 및 기타 많은 기능을 사용할 수 있지만 순수한 자바 스크립트로 수행하는 방법을 알고 싶습니다.)

나는 캔버스 요소에서 스크린 샷을 걸릴 수 : <canvas /> and print screen/screenshot 을 심지어 사이트의 전체 화면을 캡처 : Take screenshot of the whole webpage (이 기준) 가능성 S (단일/다중 구성 요소에 대한 스크린 샷을이 있어야한다 only)

그러나 HTML5의 api 파일 (사용자가 선택할 수있는 위치)을 사용하여 이러한 요소를 저장하는 방법을 아는 사람이 있습니까?

Answer 1

자바 스크립트는 브라우저 렌더링 엔진에서 픽셀 수준의 항목에 액세스 할 수 없습니다.

나는 유일한 브라우저가 순수한 자바 스크립트로 전체 브라우저 렌더링 엔진을 구현하는 HTML 2 Canvas과 같은 도구라고 생각합니다. 그런 다음 이미지를 canvas 요소에 저장할 수 있습니다.

HTML이 캔버스

이 스크립트는 직접 사용자의 브라우저에, 당신은 웹 페이지 또는 그 부품의 "스크린 샷"을 촬영할 수 있습니다. 스크린 샷은 DOM을 기반으로하므로 실제 스크린 샷을 만들지 않으므로 실제 표현에 대해 100 % 정확하지는 않지만 페이지에서 사용할 수있는 정보를 기반으로 스크린 샷을 만듭니다.

이 기사에를 통해 연결하기 때문에

은 실제로 당신이 연결 대답은 여기에만 관련이 있습니다 (꽤 복잡한 웹 페이지를 렌더링, 그것이 100 % 정확하지 않을 수 있습니다 말한다 부분을 참고) 그 스크린 샷을 위해 스크린 샷을 스트리밍하여 HTML 2 캔버스를 설명합니다.