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