html2canvas截图图像

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

解决方案1
0 2014-07-09 10:02:14

html2canvas截图图像

问题描述

1 个解决方案

解决方案1 0 2014-07-09 10:02:14

解决方案1
0 2014-07-09 10:02:14