如何使用javascript在html中截取屏幕截圖？

Question

我是 html 和 javascript 的新手。 我正在嘗試截取我的 html 頁面的屏幕截圖並將其另存為jpg或png文件。

這是我的 html 圖像

我想通過按圖像右上角的“圖像保存”按鈕，使用那些拖放divs截取右側（用灰色着色）的屏幕截圖。

如何使用 html 和 javascript 截屏？ 我看到了一些 html2canvas 但這不是我想要的。 我認為..

有人對此有什么想法嗎？

謝謝，

ps如果你想要我的html代碼，我可以編輯

Answer 1

您只能使用 Canvas 將圖像或視頻幀捕獲為屏幕截圖。 但是，如果您想捕獲網頁上的特定元素，請嘗試使用以下庫： html2canvas

這是代碼：

注意：在 drawImage() 函數中仔細調整尺寸

 $(".drag").draggable(); $(".drag").droppable(); var takeScreenShot = function() { html2canvas(document.getElementById("container"), { onrendered: function (canvas) { var tempcanvas=document.createElement('canvas'); tempcanvas.width=350; tempcanvas.height=350; 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(); } }); }

 #container{ width:400px; height:200px; } #rightcontainer{ width:300px; height:200px; background:gray; color:#fff; margin-left:110px; padding:10px; } #leftmenu{ color:#fff; background-color:green; width:100px; height:200px; position:fixed; left:0; padding:10px; } button{ display:block; height:20px; margin-top:10px; margin-bottom:10px; } .drag{ width:40px; height:20px; background-color:blue; z-index:100000; margin-top:10px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> <button onclick="takeScreenShot()">Snapshot</button> <div id="container"> <div id="leftmenu"> Left Side <div class="drag"> </div> <div class="drag"> </div> <div class="drag"> </div> Drag-----------> & Click Snapshot </div> <div id="rightcontainer"> Right Side </div> </div>