웹 캡처 및 변환 도구

JavaScript로 웹 사이트 스크린 샷 찍기

자바 스크립트 API
최대 XNUMXW 출력을 제공하는 진단 패널 코드 디버깅에 도움을 줄 수 있습니다!

GrabzIt JavaScript API를 사용하는 것은 이미지, DOCX 또는 PDF 스크린 샷과 가장 간단한 방법입니다. 비디오에서 애니메이션 GIF로 변환 그리고 더 into 귀하의 웹 사이트. 단지 요구 GrabzIt JavaScript 라이브러리, JavaScript 코드 및 GrabzIt 마술 라인!

기본적으로 캡처가 생성되면 패키지에 의해 결정된 시간 동안 서버에 캐시 된 상태로 유지됩니다. 그런 다음 GrabzIt의 JavaScript API를 호출하면 이전에 캐시 된 스크린 샷과 동일한 매개 변수를 대신 사용하여 스크린 샷 수당을 불필요하게 사용하지 못하게합니다. 이 동작을 사용하여 비활성화 할 수 있습니다 캐시 매개 변수.

시작 가이드

Javascript API를 시작하려면 다음 단계를 수행하십시오.

  1. 너의 자유를 얻으 십시요 응용 프로그램 키.
  2. 무료 다운로드 자바 스크립트 라이브러리 시도해보십시오 데모 앱.
  3. 아래의 개요를 읽고 GrabzIt의 JavaScript API 작동 방식에 대한 기본 사항을 알아보십시오.

다른 사람이 JavaScript 코드를 복사하고 모든 GrabzIt 계정 리소스를 훔치지 못하게하려면 반드시 어떤 도메인을 승인 응용 프로그램 키를 사용할 수 있습니다.

가장 간단한 예

시작하려면 GrabzIt JavaScript 라이브러리 그리고 포함 grabzit.min.js 캡처하려는 웹 페이지의 라이브러리 또는 CDN 버전에 대한 참조를 포함합니다. grabzit.min.js 아래와 같이 라이브러리. 그런 다음 아래 코드를 포함시켜 웹 페이지의 본문 태그에 스크린 샷을 추가하십시오. 당신은 교체해야합니다 APPLICATION KEY응용 프로그램 키 교체 https://www.tesla.com 스크린 샷을 만들려는 웹 사이트에서

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com").Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>").Create();
</script>

그런 다음 잠시 기다렸다가 웹 페이지를 다시로드 할 필요없이 이미지가 페이지 상단에 자동으로 나타납니다. 이 이미지는 브라우저에서 생성 되더라도 계속 사용할 수 있습니다 이러한 기술 save 자신의 서버에서 캡처 당신이 원하는 경우.

GrabzIt을 ES6 모듈로 대신 사용하려면 이것을 사용할 수 있습니다 기술, GrabzIt이 JavaScript에 포함되어있는 방법 외에, 여기에 설명 된 것과 정확히 같은 방식으로 작동합니다.

스크린 샷 사용자 정의

응용 프로그램 키와 URL 또는 HTML 매개 변수가 필요하지만 다른 모든 매개 변수 매개 변수 선택 사항입니다. 매개 변수는 필요한 모든 선택적 매개 변수에 대해 다음 형식으로 매개 변수에 값을 JSON 사전으로 추가하여 추가됩니다.

예를 들어 너비가 400px이고 높이가 400px인 스크린샷을 PNG 형식으로 만들고 스크린샷을 찍기 전에 10초를 기다리려면 다음을 수행합니다.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"width": 400, "height": 400, "format": "png", "delay": 10000}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"width": 400, "height": 400, "format": "png", "delay": 10000}).Create();
</script>

JavaScript API는 웹 페이지의 HTML에 쉽게 액세스 할 수 있으므로 캡처에도 이상적입니다 동적 웹 페이지 콘텐츠 또는 내용 로그인 뒤에.

PDF 작성 등

PDF, DOCX, CSV, JSON 또는 Excel 스프레드 시트와 같은 다른 유형의 캡처를 만들려면 원하는 형식 만 지정하면 자동으로 만들어집니다. 예를 들어 아래 예제에서 우리는 URL과 HTML에서 각각 DOCX와 PDF 문서를 만들고 있으며, 그런 다음 자동으로 사용자 브라우저로 다운로드됩니다.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"format": "pdf", "download": 1}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"format": "pdf", "download": 1}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"format": "docx", "download": 1}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"format": "docx", "download": 1}).Create();
</script>

이것을 기억하는 것이 중요합니다 다운로드 매개 변수 DOCX, PDF, PNG, JPG 또는 CSV와 같은 모든 유형의 캡처를 자동으로 다운로드하는 데 사용할 수 있습니다.

요소에 스크린 샷 추가

최대 XNUMXW 출력을 제공하는 AddTo 아래의 메소드는 이미지 또는 PDF 캡처를 추가하기 위해 요소 또는 DOM 요소의 id를 HTML 문서 내의 위치로 받아들입니다. 아래 예에서 스크린 샷은 insertCode DIV.

마지막으로 필요한 것을 전달하십시오 매개 변수 에 대한 JSON 사전으로 ConvertURL or ConvertHTML 행동 양식. 아래 예에서 지연은 1000ms로, 형식은 PNG로 설정되었습니다. 그러나 다른 추가 옵션이 필요하지 않으면이 매개 변수를 전혀 지정할 필요가 없습니다.

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="insertCode"></div>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.yahoo.com", {"delay": 1000, "format": "png"}).AddTo("insertCode");
</script>
</body>
</html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="insertCode"></div>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>", 
{"delay": 1000, "format": "png"}).AddTo("insertCode");
</script>
</body>
</html>

캡처를 데이터 URI로 변환

최대 XNUMXW 출력을 제공하는 DataURI 아래의 메소드는 콜백 함수를 허용합니다.이 함수는 스크린 샷의 base64 데이터 URI 또는 ​​캡쳐가 캡처 된 후에 캡처되면 JavaScript 응용 프로그램이 캡처를 더욱 강력하게 제어 할 수 있습니다.

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="datauri" style="width:100%;word-break:break-all"></div>
<script type="text/javascript">
function callback(dataUri)
{
    document.getElementById('datauri').innerHTML = dataUri;
}
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.yahoo.com").DataURI(callback);
</script>
</body>
</html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="datauri" style="width:100%;word-break:break-all"></div>
<script type="text/javascript">
function callback(dataUri)
{
    document.getElementById('datauri').innerHTML = dataUri;
}
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>").DataURI(callback);
</script>
</body>
</html>

GrabzIt 방법

시작하려면 변환하려는 항목을 표시하기 위해 다음 세 가지 방법 중 하나를 선택해야합니다.

그런 다음 이러한 방법 중 하나 이상을 선택하여 캡처 작성 방법을 지정하십시오.

이 JavaScript 코드 라이브러리는 완전히 오픈 소스입니다! 소스 코드를 보거나 향상 시키려면 GitHub의.