JavaScript는 웹 페이지 스크린샷 function_javascript 기술을 구현합니다.

JavaScript를 사용하여 스크린샷을 찍는 경우 두 가지 오픈 소스 구성 요소를 추천하고 싶습니다. 하나는 Canvas 그리기를 PNG/JPEG/BMP 이미지로 프로그래밍할 수 있는 Canvas2Image입니다. DOM(적어도 대부분)의 스크린샷을 찍으려면 DOM 개체를 캔버스 개체로 변환할 수 있는 html2canvas가 필요합니다. 두 가지 기능을 결합하면 페이지의 DOM을 PNG 또는 JPEG 이미지로 스크린샷할 수 있는데, 이는 매우 훌륭합니다.

캔버스2이미지

원칙은 HTML5 캔버스 개체를 사용하여 toDataURL() API를 제공하는 것입니다.

코드 복사 코드는 다음과 같습니다.

var strDataURI = oCanvas.toDataURL()
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."를 반환합니다.

이러한 결과는 base64로 인코딩되므로(실제로 이미지는 이런 방식으로 문자열 형식으로 페이지에 기록될 수도 있음) base64 인코딩 및 디코딩 lib도 필요합니다.

그러나 현재 많은 결함이 있습니다. 예를 들어 Opera와 Safari는 현재 PNG만 지원하는 반면 FireFox는 훨씬 더 나은 지원을 제공합니다.

이미지를 생성하여 페이지에 쓰는 방법에는 두 가지가 있습니다. 하나는 이미지 개체를 생성하여 페이지 DOM 트리에 쓰는 것입니다.

코드 복사 코드는 다음과 같습니다.

// 변환된 PNG 이미지가 포함된 요소를 반환합니다.
var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);

하지만 JavaScript 스크린샷 기능을 만드는 경우 스크린샷을 찍은 후 파일을 저장하기 위한 "저장" 대화 상자를 자동으로 열 수 있습니다.

코드 복사 코드는 다음과 같습니다.

Canvas2Image.saveAsPNG(oCanvas);
// 사용자에게 이미지를 PNG로 저장하라는 메시지를 표시합니다.

이 메소드를 호출하면 mimeType이 "image/octet-stream"인 데이터 스트림이 브라우저에 생성되지만 "저장" 대화 상자는 이미지의 적절한 접미사 이름을 인식할 수 없습니다. FireFox에 저장된 기본 파일은 "xxx.part"입니다. 안타깝지만 해결책이 없는 것 같습니다.

html2canvas

DOM 로딩 프로세스에 따라 정보를 수집한 후 캔버스 이미지를 그립니다. 즉, 표시된 DOM 트리를 실제로 캔버스 이미지로 잘라내는 것이 아니라 DOM 트리를 기반으로 캔버스를 다시 그리는 것입니다. 그림. 따라서 많은 CSS 스타일을 정확하게 인식할 수 없고 이미지에 정확하게 반영할 수 없습니다.

다음과 같은 기타 많은 제한사항이 있습니다.

●자바스크립트는 동일한 도메인에 있어야 합니다. 크로스 도메인 상황에서는 프록시 서버를 사용해야 합니다(API에 지정할 수 있는 매개변수가 있음).
●프레임 내의 DOM 트리를 정확하게 그릴 수 없습니다.
●그림은 캔버스이므로 IE8과 같은 브라우저에서는 FlashCanvas와 같은 타사 라이브러리를 사용해야 합니다.

이 페이지에서는 이를 사용하여 스크린샷을 찍는 다양한 웹사이트의 효과를 테스트할 수 있으며 효과는 꽤 좋습니다.

API 사용 예:

코드 복사 코드는 다음과 같습니다.

html2canvas(
[dom1, dom2],
{
        로깅: false,
useCORS: 거짓,
​​​​프록시:​​false,
onrendered: 함수(캔버스){
// 캔버스는 그려지는 객체입니다
}
}
);

이 비교적 틈새 클래스 라이브러리의 경우 API 정의를 포함하여 문서가 매우 열악하며 소스 코드를 읽어야 하며 코드가 명확하게 작성되어 있습니다.

또한 이 사이트의 다운로드 패키지에는 이 API를 캡슐화하고 무시할 수 있는 JQuery 플러그인이 있습니다.