JavaScript 스크린 샷을 사용하여 여기에서 두 가지 오픈 소스 구성 요소를 추천하고 싶습니다. 하나는 캔버스 드로잉 및 프로그래밍 PNG/JPEG/BMP 이미지를 프로그래밍 할 수있는 Canvas2Image입니다. 그러나 그것을 혼자있는 것만으로는 충분하지 않습니다. DOM 객체를 캔버스 객체로 변환 할 수있는 html2canvas가 필요한 DOM (적어도 대다수)의 스크린 샷을 가져와야합니다. 이 둘의 기능을 결합하면 페이지의 DOM 스크린 샷을 PNG 또는 JPEG 이미지로 가져갈 수 있습니다.
Canvas2image
그 원칙은 html5 캔버스 객체를 사용하여 todataurl () API를 제공하는 것입니다.
코드 사본은 다음과 같습니다.
var strdatauri = ocanvas.todataurl ();
// "data : image/png; base64, ivborw0kggoaaansuheugaaamgaaadicayaact를 반환합니다 ..."
결과는 base64- 인코딩 (실제로 이미지는 문자열 형태로이 방법으로 페이지에 기록 할 수 있음)이므로 Base64에 인코딩 된 lib도 필요합니다.
그러나 현재 많은 결함이 있습니다. 예를 들어, Opera와 Safari는 PNG 만 지원하는 반면 Firefox는 훨씬 더 잘지지합니다.
페이지에 사진을 작성하는 두 가지 방법이 있습니다. 하나는 Page dom tree에 쓸 수있는 이미지 개체를 생성하는 것입니다. 이는 또한 더 나은지지 방법입니다.
코드 사본은 다음과 같습니다.
// 변환 된 PNG 이미지를 포함하는 <Img> 요소를 반환합니다.
var oimgpng = canvas2image.saveaspng (ocanvas, true);
그러나 JavaScript Screenshot 함수를 수행하면 스크린 샷 다음에 파일을 저장하기 위해 "저장"대화 상자를 자동으로 열 수 있습니다.
코드 사본은 다음과 같습니다.
canvas2image.saveaspng (ocanvas);
// 사용자에게 이미지를 PNG로 저장하라는 메시지가 표시됩니다.
이 메소드를 호출하면 브라우저에 Mimetype "Image/Octet-stream"이있는 데이터 스트림이 생성되지만 "저장"대화 상자는 이미지의 적절한 접미사 이름을 인식 할 수 없습니다. 기본 저장 파일은 Firefox에서 "xxx.part"라고합니다. 이것은 유감이지만 좋은 해결책은없는 것 같습니다.
html2canvas
DOM 로딩 프로세스에서 작용하고 정보를 수집 한 다음 캔버스 이미지를 그립니다. 다시 말해, 실제로 표시된 DOM 트리를 Canvas 사진으로 자르지 않고 Dom 트리를 기반으로 캔버스 사진을 다시 드로 워싱합니다. 따라서 많은 CSS 스타일을 정확하게 식별 할 수 없으며 그림에 정확하게 반영 될 수 없습니다.
다음과 같은 다른 많은 제한 사항이 있습니다.
● JavaScript는 동일한 도메인이어야합니다. 크로스 도메인 상황의 경우 프록시 서버를 사용해야합니다 (API에 지정할 수있는 매개 변수가 있음). 이미지에 대해서도 마찬가지입니다.
● 프레임의 DOM 트리는 정확하게 그릴 수 없습니다.
● 캔버스 다이어그램을 그리려면 IE8과 같은 브라우저는 FlashCanvas와 같은 타사 라이브러리를 사용해야합니다.
이 페이지는 각 웹 사이트에서 스크린 샷에 사용하는 효과를 테스트 할 수 있으며 그 효과는 매우 좋습니다.
API 사용의 예 :
코드 사본은 다음과 같습니다.
html2canvas (
[dom1, dom2],
{
로깅 : 거짓,
USECORS : False,
프록시 : 거짓,
onrender : function (canvas) {
// 캔버스는 그려진 캔버스 객체입니다
}
}
);
이러한 유형의 비교적 틈새 클래스 라이브러리의 경우 소스 코드를 읽어야하고 코드에 명확하게 작성된 API의 정의를 포함하여 문서가 매우 열악합니다.
또한이 사이트의 다운로드 패키지에는 jQuery 플러그인이 있으며이 API를 캡슐화하고 무시할 수 있습니다.