In my app I have to provide a 'save as image' button. I want to save the HTML rendered on my webpage as an image in JavaScript. It is a webapp and will be used in browsers of desktop/tablet/mobile phones. How to save rendered HTML as an image?
-
For firefox there are several addons. Here is one addons.mozilla.org/en-us/firefox/addon/…me_digvijay– me_digvijay2013-08-19 11:10:08 +00:00Commented Aug 19, 2013 at 11:10
-
well first saving files in general into a Server yes can be without a postback but there must be a IFRAME handling the save process because you must go to the server saving this text as an image i dont have a tool for that but saving it as an pdf there is a tool called ItextSharp it will help youMarwan– Marwan2013-08-19 11:23:02 +00:00Commented Aug 19, 2013 at 11:23
Add a comment
|
3 Answers
Check out html2canvas. A javascript framework that renders the page content on a canvas element. Saving the canvas as an image is as easy as:
var canvas = document.getElementById("mycanvas");
var img = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
4 Comments
Bhavika
tried using html2canvas but the image was not proper. for example if we have x/y then the forward slash is not present in the image(only x y are present).
Shane
I ended up with about the first 300 pixels of page content, but everything after was blank
A M
html2canvas only saves as image the visible portion of html page. If the page is larger than the device screen, it produces a cutted image.
Shivang Gupta
Also it is not showing the correct representation of multiple html elements(say select).
Using 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:/' ) ; ?>
Comments
Your question is very incomplete. First, is that a mobile or desktop app? In both cases, the solution to your problem will strongly depend on the HTML engine that renders the pages: Webkit, Geko/Firefox, Trident/IE for example have their own method to produce the view that you want to save as an image.
Anyway, you could start looking at how this Firefox plugin works: https://addons.mozilla.org/it/firefox/addon/pagesaver/
It should do what you want to implement, look for its source code.
1 Comment
Bhavika
it is a webapp. Will be used in browsers of desktop/tablet/mobile phones.I want something like saving rendered html as an image.i wouls provide the user with a button which saves the html on that page as image. an addon would not do this task as per my knowledge.
