javascript如何保存在網頁上呈現的HTML作爲圖像

Question

在我的應用程序中，我必須提供「另存爲圖像」按鈕。我想將呈現在我的網頁上的HTML保存爲JavaScript中的圖像。假設我有一些html，並點擊'另存爲圖像'，這個html應該保存爲圖像。

Answer 1

結賬html2canvas。在canvas元素上呈現頁面內容的JavaScript框架。保存畫布作爲圖像一樣簡單：

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

source

Answer 2

你的問題是非常不完整的。首先，是移動或桌面應用程序？在這兩種情況下，問題的解決方案都將很大程度上取決於呈現頁面的HTML引擎：例如，Webkit，Geko/Firefox，Trident/IE都有自己的方法來生成要保存爲圖像的視圖。

無論如何，你可以開始看這個Firefox插件是如何工作的：https://addons.mozilla.org/it/firefox/addon/pagesaver/

它應該做你想要實現的東西，找它的源代碼。

Answer 3

使用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:/') ; ?>