html2canvas 截图一张图片答案

【问题标题】：html2canvas screenshot an imagehtml2canvas 截图一张图片
【发布时间】：2014-08-30 05:04:18
【问题描述】：

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

这是我的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>

【问题讨论】：

您基本上是想在画布中放置图像或视频？ html5canvastutorials.com/tutorials/html5-canvas-images
@JonasGrumann 实际上我正在尝试截取图像而不是表单
为什么要截取一张图片？为什么不使用图像本身？您能否提供有关上下文和所需输出的更多信息？
@JonasGrumann suure 我有一个正在播放和编辑的视频我正在尝试在编辑后截取该视频的特定宽度和高度的屏幕截图。然后我想保存这个截图。视频暂停后，它基本上会截取图像。
如何编辑视频？使用闪光灯？我认为只有使用 Flash 或画布才能编辑视频，或者您只是向其中添加 html 元素？

标签： javascript html html2canvas

【解决方案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

【讨论】：