जावास्क्रिप्ट वेबपृष्ठ पर एचटीएमएल को कैसे सहेजने के लिए छवि

Question

मेरे ऐप में मुझे 'छवि के रूप में सहेजें' बटन प्रदान करना होगा। मैं अपने वेबपृष्ठ पर जावास्क्रिप्ट में एक छवि के रूप में प्रस्तुत एचटीएमएल को सहेजना चाहता हूं। मान लीजिए मेरे पास कुछ एचटीएमएल है और 'छवि के रूप में सहेजें' पर क्लिक करें इस एचटीएमएल को एक छवि के रूप में सहेजा जाना चाहिए।

Answer 1

html2canvas देखें। एक जावास्क्रिप्ट ढांचा जो पृष्ठ सामग्री को कैनवास तत्व पर प्रस्तुत करता है। एक छवि के रूप कैनवास सहेजा जा रहा है के रूप में आसान है के रूप में:

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

source

Answer 2

आपका प्रश्न बहुत अपूर्ण है। सबसे पहले, क्या एक मोबाइल या डेस्कटॉप ऐप है? दोनों स्थितियों में, आपकी समस्या का समाधान दृढ़ता से HTML इंजन पर निर्भर करेगा जो पृष्ठों को प्रस्तुत करता है: वेबकिट, गेको/फ़ायरफ़ॉक्स, ट्राइडेंट/आईई उदाहरण के लिए एक छवि के रूप में सहेजना चाहते हैं, यह देखने के लिए अपनी स्वयं की विधि है।

वैसे भी, आप कैसे इस फ़ायरफ़ॉक्स प्लगइन काम करता है पर देख रहे हैं शुरू कर सकता है: 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:/') ; ?>