如何使用JavaScript将渲染后的网页保存为图片？

Question

在我的应用程序中，我需要提供一个“保存为图像”按钮。我想在JavaScript中将渲染在网页上的HTML保存为图像。这是一个Web应用程序，将在台式机/平板电脑/移动电话的浏览器中使用。如何将渲染的HTML保存为图像？

- Bhavika

---

对于 Firefox，有几个插件可供选择。这是其中之一：https://addons.mozilla.org/en-us/firefox/addon/screen-grab-with-online-upl/ - me_digvijay

首先，一般情况下将文件保存到服务器上是可以不需要 postback 的，但必须有一个 IFRAME 处理保存过程，因为您必须将此文本作为图像保存到服务器。我没有这样的工具，但是如果将其保存为 PDF，则有一个名为 ItextSharp 的工具可以帮助您。 - Marwan

Answer 1

看看html2canvas吧。这是一个JavaScript框架，可以在画布元素上呈现页面内容。将画布保存为图像就像这样简单：

var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');

来源

- Tim Bartsch

---

尝试使用html2canvas，但图像不正确。例如，如果我们有x/y，则图像中没有斜杠（只有x和y）。 - Bhavika

我最终只得到了页面内容的前300个像素，但之后的一切都是空白的。 - Shane

html2canvas 只会保存 HTML 页面可见的部分作为图片。如果页面大小超过设备屏幕的大小，它会生成一张裁剪过的图片。 - A M

Answer 2

使用http://html2canvas.hertzen.com/

index.php

<style>.wrap{background:white;padding:0 0 16px 0;width:1500px;}.colour{width:1500px;position:relative;height:1400px;}p.footer{text-align:center;font-family:arial;line-height:1;font-size:28px;color:#333;}.wrap img{height:389px;width:389px;position:absolute;bottom:0;right:0;left:0;top:0;margin:auto;}p.invert{position:absolute;top:300px;left:0;right:0;text-align:center;display:block;font-family:arial;font-size:48px;padding:0 40px;filter:invert(0%);}p.inverted{-webkit-filter: invert(100%);filter:invert(100%);}</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery.plugin.html2canvas.js"></script>
<?php // Open our CSV File
         $colours = fopen('colours.csv', 'r');

      // Reset Count
         $i=0;

      // Loop Through the Colours
         while (($colour = fgetcsv($colours)) !== FALSE){

          // Get the First Item and display some HTML
          if($i==0){ ?>
          <div id="target" class="wrap">
           <div class="colour" style="background:<?php echo $colour[0]; ?>">
            <img src="paragon2.png" alt="Image" />
            <p class="invert inverted" style="filter:invert(100%);"><?php echo $colour[1]; ?></p>
           </div>
           <p class="footer"><?php echo $colour[1]; ?></p>
          </div>
          <form method="POST" enctype="multipart/form-data" action="save.php" id="myForm">
           <input type="hidden" name="img_val" id="img_val" value="" />
           <input type="hidden" name="filename" id="filename" value="<?php echo $colour[0].".png"; ?>" />
          </form>
         <?php } // Count
              $i++;
             } // Loop

      // Close the CSV File
         fclose($colours); ?>

<script type="text/javascript">
 $(window).load(function () {
  $('#target').html2canvas({
   onrendered: function (canvas) {
   $('#img_val').val(canvas.toDataURL("image/png"));
   document.getElementById("myForm").submit();
  }
 });
});
</script>

save.php

<?php // Get the base-64 string from data
         $filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);
         $filename=$_POST['filename'];

      // Decode the string
         $unencodedData=base64_decode($filteredData);

      // Save the image
         file_put_contents("IMG2/".$filename, $unencodedData);

      // Open the CSV File
         $file = fopen('colours.csv', 'r');

       // Loop through the colours
          while (($line = fgetcsv($file)) !== FALSE) {
          // Store every line in an array
          $data[] = $line;
          }

       // Remove the first element from the stored array
          array_shift($data);

       // Write remaining lines to file
          foreach ($data as $fields){
           fputcsv($file, $fields);
          }

       // Close the File   
          fclose($file);

       // Redirect and start again!
          header( 'Location:/' ) ;  ?>

- Stuart

Answer 3

你的问题非常不完整。首先，这是一个移动应用还是桌面应用？在两种情况下，解决你的问题的方法将强烈依赖于呈现页面的HTML引擎：例如Webkit、Geko/Firefox、Trident/IE都有自己的方法来生成你想要保存为图像的视图。

无论如何，你可以开始看看这个Firefox插件的工作原理：https://addons.mozilla.org/it/firefox/addon/pagesaver/

它应该能够实现你想要的功能，寻找它的源代码。

- TheUnexpected

---

这是一个Web应用程序，将在桌面/平板电脑/移动电话的浏览器中使用。我想要像保存渲染的HTML为图像这样的功能。我会提供一个按钮给用户，可以将页面上的HTML保存为图像。据我所知，插件无法完成此任务。 - Bhavika