JavaScript로 사용자 웹 페이지의 스크린 샷을 만드는 방법

사용자 웹페이지의 스크린샷을 찍고 싶었던 적이 있습니까? 아마도 더 쉽게 버그를 수정하거나 사용자를 활성화하기 위해 interface 개선? 그럼 당신은 할 수 있습니다 GrabzIt의 JavaScript API.

사용자 페이지를 캡처하려면 다음을 사용해야 합니다. ConvertPage 방법. 그러면 사용자 페이지의 내용이 변환되도록 당사로 전송됩니다. intoa 이미지, PDF, DOCX 또는 우리가 지원하는 모든 것. CSS 또는 이미지와 같은 리소스는 공개적으로 제공되지 않는 한 스크린샷에 포함되지 않으면 로드할 수 없다는 점을 기억하는 것이 중요합니다. 그러나 이것은 일반적으로 그렇습니다.

아래의 간단한 예는 GrabzIt의 라이브러리를 사용하여 사용자 웹 페이지의 스크린샷을 찍는 것이 얼마나 쉬운지 보여줍니다. 캡처하려는 페이지 하단에 코드를 삽입하기만 하면 됩니다.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.5.2/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertPage().Create();
</script>

무엇이든 통과할 수 있습니다. 매개 변수 JavaScript API를 통해 ConvertPage 방법을 사용하여 스크린샷을 추가로 맞춤설정할 수 있습니다. 예를 들어 아래 예에서는 스크린샷을 사용자 웹 페이지와 동일한 너비로 만들고 전체 높이를 캡처합니다.

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

그러나 위의 예는 웹 페이지가 로드될 때 페이지를 캡처하는 것이 아니라 일종의 이벤트에서 웹 페이지 캡처를 트리거해야 하기 때문에 제한적입니다. 예를 들어 두 가지 잠재적인 대안은 버튼 클릭 시 또는 정기적으로 웹 페이지를 캡처하는 것입니다. int타이머가 있는 어발.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.5.2/grabzit.min.js"></script>
<script>
setTimeout(function(){
   GrabzIt("Sign in to view your Application Key").ConvertPage({
      "bwidth":document.documentElement.clientWidth,
      "bheight": -1, 
      "height": -1,
      "width": -1
   }).CreateInvisible();
}, 30000);
</script>

위의 예에서는 30초마다 사용자 웹 페이지의 스크린샷을 자동으로 생성합니다. 하지만 스크린샷을 사용자 웹페이지에 추가하거나 다운로드하는 대신 Create 이전 예제에서 사용된 방법은 형식에 따라 다릅니다. 그만큼 CreateInvisible 사용자에게 결과를 반환하지 않는 메서드가 사용됩니다.

그런 다음 수 save 자바스크립트 스크린샷 다음 방법 중 하나를 사용합니다. 결과를 Amazon, Dropbox, FTP 등으로 내보내는 내보내기 매개변수입니다. 또는 종료 이벤트를 사용하여 웹 서비스를 호출할 수 있습니다. save 그 결과 또는 DataURI 결과를 웹 서비스에 게시하는 방법입니다.

분명히 이 작업을 사용자에게 알려야 할 필요가 있다는 것은 말할 필요도 없습니다.

현재 웹페이지의 스크린샷을 무료로 시작할 수 있습니다. 계정 만들기 그리고 위의 코드를 복사하면 intoa 캡처하려는 웹 페이지. 다른 사람이 귀하의 계정을 사용하지 못하도록 하려면 다음을 수행해야 한다는 점을 기억하십시오. 도메인을 승인하세요 귀하의 웹 사이트에서 작동하기 전에.

더 많은 웹 캡처 기사 커뮤니티 문의