Question

我发现这段代码会截取表单的截图。我正在尝试截取图像或视频的屏幕截图。有没有办法可以截取网页的一部分，并按照此代码保存表单的方式保存？

这是我的HTML代码

  <!doctype html>
  <html>
  <head>
   <link type="text/css" rel="stylesheet" href="main.css" />
  <title>Poster</title>
  <script type="text/javascript" src="html2canvas.js"></script>
  <script type="text/javascript">
  var Submit = function() {
  html2canvas(document.body, {
    onrendered: function(canvas) {
      document.body.appendChild(canvas);
    }
   });
   };
   </script>
   </head>
   <body>
   <div id="main_image">
   <img src="image.jpg" id= "image"/>
   <div id="user_text">IT IS TOTALLY AWESOME</div>
    </div>
   <div id="edit_text_box">
   <textarea id="user_input" placeholder="Your text here.." rows="2" cols="30" >   </textarea>
   <div id="change_size">
    <span style="float: left;">FONT-SIZE : </span>
   <button id="decrease_size">-</button>
   <button id="increase_size">+</button>
   </div>
   <button onclick="Submit();" >Submit</button>
   </div>
    <script type="text/javascript" src="js/jquery.js"></script>
   <script type="text/javascript" src="js/edit_text.js"></script>
   </body>
   </html>

Answer 1

要从画布中获取实际图像并将其复制到另一个画布上，您需要获取第一个画布的所有imageData（带有编辑过的视频的图像）

var myImageData = context.getImageData(left, top, width, height);

并将imageData放在第二个画布上：

targetContext.putImageData(myImageData, dx, dy);

并将其另存为图片：

var image = canvas.toDataURL();

之后，您将拥有一个字符串作为图像，可用作html图像的src属性。

请注意，您正在询问如何将某些内容复制到画布上，这就是我告诉您有关getImageData和putImageData的原因。如果您只需要原始图像当前状态的图像，则不需要第一步，只需使用canvas.toDataURL

html2canvas截图

1 个答案: