사용하여 자바 스크립트 내가 부트 스트랩 모달의 스크린 샷을 이미지 파일로 저장하기 위해 노력하고있어

Question

var takeScreenShot = function(){ 
 
\t html2canvas(document.body, { 
 
\t \t onrendered: function(canvas) { 
 
\t \t var tempcanvas=document.createElement('canvas'); 
 
      tempcanvas.width=1350; 
 
      tempcanvas.height=1350; 
 
      var context=tempcanvas.getContext('2d'); 
 
      context.drawImage(canvas,112,0,288,200,0,0,350,350); 
 
      var link=document.createElement("a"); 
 
      link.href=tempcanvas.toDataURL('image/jpg'); //function blocks CORS 
 
      link.download = 'screenshot.jpg'; 
 
      link.click(); 
 
\t \t } 
 
\t }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<!-- Trigger the modal with a button --> 
 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 
<div id="container"> 
 
    <!-- Modal --> 
 
<div id="myModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
\t <button onclick="takeScreenShot()">Snapshot</button> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div> 
 
</div>

부트 스트랩 모달의 화면을 캡처. html2canvas 라이브러리를 사용하고 있습니다. 때 스냅 샷 버튼을 클릭하지만 이미지로 모달 변환해야합니다.

누구나 해결책이 있습니다.

Answer 1

이 항목을 사용해보세요 !!

html2canvas($("#modelId"), { 
    useCORS: true, 
    onrendered: function(canvas) { 
     theCanvas = canvas; 
     canvas.toBlob(function(blob) { 
      saveAs(blob, "Project.png"); 
     }); 
    } 
});