웹 캡처 및 변환 도구

JavaScript 스크린 샷 API로 Div 캡처

자바 스크립트 API

일반적인 요구 사항은 HTML 페이지에서 단일 HTML 요소의 내용 만 캡처하는 방법입니다. 예를 들어 div, span 또는 canvas 요소.

그러나 클라이언트 측 코드를 사용하여 단일 HTML 요소를 캡처하려면 먼저 해야 합니다. 이미지, PDF 또는 DOCX 스크린샷 등. 사용하려면 자바스크립트 스크린샷 API. 당신은해야합니다 무료 가입 그런 다음 다운로드 무료 JavaScript 라이브러리.

이렇게 하면 HTML 요소를 캡처하는 것이 쉽습니다. 그냥 통과하시면 됩니다 CSS 선택기 캡처하려는 요소의 목표 매개 변수입니다.

CSS 선택기를 구성하려면 캡처하려는 HTML 요소를 찾아야 합니다. 이렇게 하려면 요소를 캡처하려는 웹페이지의 HTML 소스를 살펴보세요. 이에 대한 예는 아래와 같습니다.

<div id="features">
	<h4>Acme Camera</h4>
	<label>Price</label>$399<br />
	<label>Rating</label>4.5 out of 5
</div>
<p>Cras ut velit sed purus porttitor aliquam. Nulla tristique magna ac libero tempor, ac vestibulum felisvulput ate. Nam ut velit
risus porttitor tristique at ac diam. Sed nisi risus, rutrum a metus suscipit, euismod tristique nulla. Etiam venenatis rutrum
blandit. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus eget vehicula felis.</p>

예를 들어 위의 div 만 스크린 샷을 features 아래 JavaScript 코드를 사용하세요.

이 JavaScript는 추가로 결과 이미지 스크린샷의 크기를 대상 HTML 요소와 동일한 크기로 자동 조정합니다. 설정하여 bheight, heightwidth 매개 변수 -1로. 페이지가 로드되면 동일한 위치에 이미지 스크린샷이 생성됩니다. script 꼬리표. 여기에는 다음 내용이 포함됩니다. features div와 다른 것은 없습니다.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "bheight": -1, "height": -1, "width": -1}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "format": "pdf"}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "format": "docx"}).Create();
</script>

물론 HTML을 이미지, PDF 또는 DOCX로 변환 할 때 HTML 요소를 캡처 할 수도 있습니다. 방법을 교체하십시오. ConvertURLConvertHTML 위.

동적 컨텐츠 캡처

사용자가 페이지 내용을 캡처 한 후 종종 int예를 들어 양식을 작성한 후 어떤 식 으로든 오류가 발생했습니다. GrabzIt은 ConvertPage 방법. 그러면 웹페이지의 URL과 함께 웹페이지의 현재 HTML이 GrabzIt로 전송됩니다. 그런 다음 시스템은 브라우저에 콘텐츠를 로드하고 이를 변환합니다. into 이미지, DOCX 또는 PDF 문서.

절대 URL이 참조하는 이미지나 CSS 등의 리소스를 로드합니다. 당신은 int이 방법이 제대로 작동하려면 ernet 연결이 필요합니다.

<div id="divSection">
    <form id="myForm">
        <label>Name</label><input type="text" name="name" />
        <label>Age</label><input type="text" name="age" />
        <input type="button" data-gt-translate-attributes='[{"attribute":"value","format":"json"}]' value="Save"/>
    </form>
</div>

이 예에서는 웹페이지의 복사본을 만들고 이를 양식 값으로 업데이트한 다음 변환을 위해 GrabzIt로 보냅니다. 우리는 div만 캡처하고 싶기 때문에 divSection위에 표시된대로 대상으로 전달합니다. 그러나 사용자가 업데이트 한 JSON 매개 변수를 지정하고 전체 웹 페이지를 캡처 할 수 없습니다.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertPage({"target": "#divSection", "bheight": -1, "height": -1, "width": -1}).Create();
</script>

HTML 요소를 타겟팅 할 때 PDF가 잘리는 방법 이 기술을 사용하여 제어.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertPage({"target": "#divSection", "format": "pdf"}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertPage({"target": "#divSection", "format": "docx"}).Create();
</script>

캡처하는 웹 사이트의 특성에 따라이 방법을 사용하여 콘텐츠를 캡처 할 수도 있습니다 로그인 뒤에. 원하는 대로 대상 매개변수를 사용하거나 사용하지 않고 위의 접근 방식을 사용하면 됩니다. 그런 다음 페이지 리소스를 제한하지 않은 경우 사용자가 보는 대로 웹페이지 콘텐츠를 캡처할 수 있습니다.