javascript jak zapisywać html renderowane na stronie jako obraz

Question

W mojej aplikacji muszę podać przycisk "zapisz jako obraz". Chcę zapisać html renderowany na mojej stronie jako obraz w javascript. Załóżmy, że mam trochę html i po kliknięciu "zapisz jako obraz" ten html powinien zostać zapisany jako obraz.

Answer 1

Zapoznaj się z html2canvas. Struktura javascript, która renderuje zawartość strony na elemencie canvas. Zapisywanie płótno jako obraz jest tak proste, jak:

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

source

Answer 2

Twoje pytanie jest bardzo niekompletne. Po pierwsze, czy jest to aplikacja mobilna czy komputerowa? W obu przypadkach rozwiązanie twojego problemu będzie silnie zależało od silnika HTML, który renderuje strony: Webkit, Geko/Firefox, Trident/IE mają na przykład własną metodę tworzenia widoku, który chcesz zapisać jako obraz.

W każdym razie, można zacząć patrzeć na to, jak działa Wtyczka Firefox: https://addons.mozilla.org/it/firefox/addon/pagesaver/

Należy robić to, co chcesz, aby wdrożyć, poszukaj jego kodu źródłowego.

Answer 3

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