使用javascript截取bootstrap modal的截图

Question

 var takeScreenShot = function(){ html2canvas(document.body, { onrendered: function(canvas) { 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(); } }); }

 <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"> <button onclick="takeScreenShot()">Snapshot</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div>

I'm trying to take a screenshot of bootstrap modal and save it as image file. I'm using html2canvas library. When snapshot button clicks but i want convert modal into image.

Anyone have solution for this..

Answer 1

Try this !!

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