Javascript 如何使用javascript在html中截取屏幕截图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42828187/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to take a screenshot in html with javascript?
提问by paulc1111
I'm a newbie in html and javascript. And I'm trying to take a screenshot of my page of html and save it as jpgor pngfile.
我是 html 和 javascript 的新手。我正在尝试截取我的 html 页面的屏幕截图并将其另存为jpg或png文件。
Here is my html image
这是我的 html 图像
I want to take a screenshot of right side(colored with gray) with those drag and drop divsby pressing Image Save button at the right corner from image.
我想divs通过按图像右上角的图像保存按钮，通过拖放来截取右侧（用灰色着色）的屏幕截图。
How can I take a screen shot with html and javascript? I saw some of html2canvas but that is not what I want. I think..
如何使用 html 和 javascript 截屏？我看到了一些 html2canvas 但这不是我想要的。我认为..
Does anybody have an idea for this?
有人对此有什么想法吗？
Thanks,
谢谢，
p.s. if you want the code of my html, I can EDIT
ps如果你想要我的html代码，我可以编辑
回答by Gaurav Chaudhary
You can only capture images or video frames as a screenshot using Canvas. But if you want to capture particular element on a web page try some library like this: html2canvas
您只能使用 Canvas 将图像或视频帧捕获为屏幕截图。但是，如果您想捕获网页上的特定元素，请尝试使用以下库：html2canvas
Here is the code:
这是代码：
Note: Adjust dimensions carefully in drawImage() function
注意：在 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>