[英]How to take a screenshot in html with javascript?
您只能使用 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.