[JQUERY] 어떻게 자바 스크립트와 사업부의 화면을 캡처하는 방법?

어떻게 자바 스크립트와 사업부의 화면을 캡처하는 방법?

해결법

1. ---

   1.아니, 방법에 '스크린 샷'요소의 모르겠지만, 당신이 무엇을 할 수 있는지, 다음 데이터를 얻기 위해 HTMLCanvasElement 객체의 toDataURL 기능을 사용하여 캔버스 요소로 퀴즈 결과를 그릴 수 있습니다 : URI를 이미지의 내용으로 .

   아니, 방법에 '스크린 샷'요소의 모르겠지만, 당신이 무엇을 할 수 있는지, 다음 데이터를 얻기 위해 HTMLCanvasElement 객체의 toDataURL 기능을 사용하여 캔버스 요소로 퀴즈 결과를 그릴 수 있습니다 : URI를 이미지의 내용으로 .

   퀴즈가 완료되면,이 작업을 수행 :

   var c = document.getElementById('the_canvas_element_id');
   var t = c.getContext('2d');
   /* then use the canvas 2D drawing functions to add text, etc. for the result */
   

   사용자가 클릭 "캡처는"이 작업을 수행 할 때 :

   window.open('', document.getElementById('the_canvas_element_id').toDataURL());
   

   이 저장하는 사용자를 허용하는 '스크린 샷'로 새 탭이나 창이 열립니다. 이것은 당신이 내 의견으로는 할 수있는 최선 그래서 종류의 대화 '다른 이름으로 저장'는 호출 할 수있는 방법은 없다.

2. ---

   2.이 html2canvas 및 FileSaver.js를 사용하여, 다단의 대답 @의 확장이다.

   이 html2canvas 및 FileSaver.js를 사용하여, 다단의 대답 @의 확장이다.

   $(function() { 
       $("#btnSave").click(function() { 
           html2canvas($("#widget"), {
               onrendered: function(canvas) {
                   theCanvas = canvas;
   
   
                   canvas.toBlob(function(blob) {
                       saveAs(blob, "Dashboard.png"); 
                   });
               }
           });
       });
   });
   

   아이디 btnSave와 버튼이 코드 블록 대기를 클릭합니다. 이 경우, 그것은 캔버스 요소에 위젯 사업부를 변환 한 후 "Dashboard.png"라는 이미지로 사업부를 저장합니다 (기본적으로 지원하지 않는 브라우저에서 FileSaver.js를 통해) 다른 이름으로 저장 () FileSaver 인터페이스를 사용 .

   이 작업의 예는이 바이올린에서 확인할 수있다.

3. ---

   3.연구의 시간 후, 나는 마침내 것은 이것이 원점 깨끗한 플래그 (방지 XSS로) 설정되어있는 경우에도, 요소의 화면을 캡처에 대한 해결책을 찾을 이유를 예를 (내 경우) Google지도 심지어 캡처 . 나는 스크린 샷을 얻을 수있는 보편적 인 기능을 썼다. 당신이 추가로 필요로하는 유일한 것은 html2canvas 라이브러리 (https://html2canvas.hertzen.com/)입니다.

   연구의 시간 후, 나는 마침내 것은 이것이 원점 깨끗한 플래그 (방지 XSS로) 설정되어있는 경우에도, 요소의 화면을 캡처에 대한 해결책을 찾을 이유를 예를 (내 경우) Google지도 심지어 캡처 . 나는 스크린 샷을 얻을 수있는 보편적 인 기능을 썼다. 당신이 추가로 필요로하는 유일한 것은 html2canvas 라이브러리 (https://html2canvas.hertzen.com/)입니다.

   예:

   getScreenshotOfElement($("div#toBeCaptured").get(0), 0, 0, 100, 100, function(data) {
       // in the data variable there is the base64 image
       // exmaple for displaying the image in an <img>
       $("img#captured").attr("src", "data:image/png;base64,"+data);
   });
   

   이미지의 크기가 큰 경우 마음을 console.log ()와 경고 () 유지는 출력을 생성 이뤄져.

   함수:

   function getScreenshotOfElement(element, posX, posY, width, height, callback) {
       html2canvas(element, {
           onrendered: function (canvas) {
               var context = canvas.getContext('2d');
               var imageData = context.getImageData(posX, posY, width, height).data;
               var outputCanvas = document.createElement('canvas');
               var outputContext = outputCanvas.getContext('2d');
               outputCanvas.width = width;
               outputCanvas.height = height;
   
               var idata = outputContext.createImageData(width, height);
               idata.data.set(imageData);
               outputContext.putImageData(idata, 0, 0);
               callback(outputCanvas.toDataURL().replace("data:image/png;base64,", ""));
           },
           width: width,
           height: height,
           useCORS: true,
           taintTest: false,
           allowTaint: false
       });
   }
   

4. ---

   4.당신은 대화 "다른 이름으로 저장"을 가지고 싶다면, 단지 적절한 헤더를 추가 PHP 스크립트로 이미지를 전달합니다

   당신은 대화 "다른 이름으로 저장"을 가지고 싶다면, 단지 적절한 헤더를 추가 PHP 스크립트로 이미지를 전달합니다

   예 "올인원"스크립트이 script.php

   <?php if(isset($_GET['image'])):
       $image = $_GET['image'];
   
       if(preg_match('#^data:image/(.*);base64,(.*)$#s', $image, $match)){
           $base64 = $match[2];
           $imageBody = base64_decode($base64);
           $imageFormat = $match[1];
   
           header('Content-type: application/octet-stream');
           header("Pragma: public");
           header("Expires: 0");
           header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
           header("Cache-Control: private", false); // required for certain browsers
           header("Content-Disposition: attachment; filename=\"file.".$imageFormat."\";" ); //png is default for toDataURL
           header("Content-Transfer-Encoding: binary");
           header("Content-Length: ".strlen($imageBody));
           echo $imageBody;
       }
       exit();
   endif;?>
   
   <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=1.7.2'></script>
   <canvas id="canvas" width="300" height="150"></canvas>
   <button id="btn">Save</button>
   <script>
       $(document).ready(function(){
           var canvas = document.getElementById('canvas');
           var oCtx = canvas.getContext("2d");
           oCtx.beginPath();
           oCtx.moveTo(0,0);
           oCtx.lineTo(300,150);
           oCtx.stroke();
   
           $('#btn').on('click', function(){
               // opens dialog but location doesnt change due to SaveAs Dialog
               document.location.href = '/script.php?image=' + canvas.toDataURL();
           });
       });
   </script>
   

5. ---

   5.당신은 스크린 샷을 할 수 없습니다 당신이 그렇게 할 수 있도록하는 무책임한 보안 위험이 될 것입니다. 그러나, 당신은 할 수 있습니다 :

   당신은 스크린 샷을 할 수 없습니다 당신이 그렇게 할 수 있도록하는 무책임한 보안 위험이 될 것입니다. 그러나, 당신은 할 수 있습니다 :

6. ---

   6.

   var shot1=imagify($('#widget')[0], (base64) => {
     $('img.screenshot').attr('src', base64);
   });
   

   htmlshot 패키지를 살펴 보자, 다음, 깊이 클라이언트 측 섹션을 확인합니다 :

   npm install htmlshot
   

7. ---

   7.

   <script src="/assets/backend/js/html2canvas.min.js"></script>
   
   
   <script>
       $("#download").on('click', function(){
           html2canvas($("#printform"), {
               onrendered: function (canvas) {
                   var url = canvas.toDataURL();
   
                   var triggerDownload = $("<a>").attr("href", url).attr("download", getNowFormatDate()+"电子签名详细信息.jpeg").appendTo("body");
                   triggerDownload[0].click();
                   triggerDownload.remove();
               }
           });
       })
   </script>
   

   인용

8. ---

   8.그것은 간단한에있어 당신은 캡처 특정 지역의 스크린 샷을이 코드를 사용할 수 있습니다 당신은 html2canvas에서 DIV id를 정의해야합니다. 여기 2 div-을 사용하고 있습니다 : DIV ID = "자동차" DIV ID = "chartContainer" 당신만을 포착 자동차 싶은 경우에 내가 여기에 차를 캡처 해요 단지 당신이 캡처 그래프 chartContainer을 변경할 수 있습니다 자동차를 사용 html2canvas ($ ( '# 자동차') 이 코드를 복사하여 붙여 넣기

   그것은 간단한에있어 당신은 캡처 특정 지역의 스크린 샷을이 코드를 사용할 수 있습니다 당신은 html2canvas에서 DIV id를 정의해야합니다. 여기 2 div-을 사용하고 있습니다 : DIV ID = "자동차" DIV ID = "chartContainer" 당신만을 포착 자동차 싶은 경우에 내가 여기에 차를 캡처 해요 단지 당신이 캡처 그래프 chartContainer을 변경할 수 있습니다 자동차를 사용 html2canvas ($ ( '# 자동차') 이 코드를 복사하여 붙여 넣기

   <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <스크립트 SRC = "https://code.jquery.com/ui/1.12.1/jquery-ui.js"> <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"> <스크립트 SRC = "https://code.jquery.com/jquery-1.12.4.min.js"무결성 = "SHA256 - ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ + Xp8a4MxAQ ="crossorigin = "익명"> <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"> <메타 이름 = "뷰포트"내용 = "= 폭 소자 폭 초기 스케일 = 1"> <링크 REL = "스타일"HREF = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <링크 REL = "스타일"HREF = "https://use.fontawesome.com/releases/v5.2.0/css/all.css"무결성 = "SHA384-hWVjflwFxL6sNzntih27bfxkr27PmbbK / iSvJ + A4 + + 0owXq79v lsFkW54bOGbiDQ"crossorigin = " 익명 ">