如何使用JavaScript在HTML中截图？ [英] How to take a screenshot in html with javascript?

问题描述

我是html和javascript的新手。我试图截取我的html页面的截图，并将其保存为 jpg 或 png 文件。

这是我的html图片

我想通过点击图像右侧的图像保存按钮拖放 divs 右侧的截图（灰色）。

如何使用html和javascript拍摄屏幕截图？
我看到了一些html2canvas，但这不是我想要的。我想..

有人对此有何看法？

谢谢，

ps如果你想要我的html代码，我可以编辑

您只能捕捉图像或视频帧作为使用画布的截图。但是如果你想捕捉网页上的特定元素，试试这个库： 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（图像/ JPG）; //功能块CORS link.download ='screenshot.jpg'; link.click（）; }}）;}

#container {width：400px; height：200px;}＃rightcontainer {width：300px;高度：200像素;背景：灰色;颜色：#FFF;保证金左：110px; padding：10px;}＃leftmenu {color：#fff;背景色：绿色;宽度：100像素;高度：200像素;位置是：固定;左：0; padding：10px;} button {display：block;高度：20像素;边距：10px的; margin-bottom：10px;}。drag {width：40px;高度：20像素;背景色：蓝色;的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 >< /脚本> < button onclick =takeScreenShot（）>快照< / button>< div id =container> < div id =leftmenu>左侧< div class =drag> < / DIV> < div class =drag> < / DIV> < div class =drag> < / DIV>拖动-----------> &安培;点击快照< / div> < div id =rightcontainer>右侧< / div>< / div>

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 jpg or png file.

Here is my html image

I want to take a screenshot of right side(colored with gray) with those drag and drop divs by pressing Image Save button at the right corner from image.

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..

Does anybody have an idea for this?

Thanks,

p.s. if you want the code of my html, I can EDIT

解决方案

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 this library: html2canvas

Here is the code:

Note: Adjust dimensions carefully in drawImage() function

$(".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>

这篇关于如何使用JavaScript在HTML中截图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！