I have a scenario that, I am creating dynamic html content and I need to export/save the html content to an image file with php, jQuery and JavaScript [or with any other if possible].
-
Hello and welcome to stackoverflow. Are you talking about writing some text (that in this case is the source of an html page) in an image file? In general, it is possible using PHP.Mohammad Naji– Mohammad Naji2012-01-31 07:21:15 +00:00Commented Jan 31, 2012 at 7:21
-
If you mean rendered HTML, that's not exactly a trivial task... Maybe some more information about the problem would help? Maybe there's a better way to reach your end goal.Corbin– Corbin2012-01-31 07:21:35 +00:00Commented Jan 31, 2012 at 7:21
-
you want to save html content to an image file(jpg/png) like that? could you please be clearrun– run2012-01-31 07:24:50 +00:00Commented Jan 31, 2012 at 7:24
-
stackoverflow.com/questions/5941631/…Muthu Kumaran– Muthu Kumaran2012-08-09 06:19:33 +00:00Commented Aug 9, 2012 at 6:19
4 Answers
You can draw the html onto a canvas. https://developer.mozilla.org/en/HTML/Canvas/Drawing_DOM_objects_into_a_canvas
and then save the canvas as an image to the server. http://motyar.blogspot.com/2010/04/save-html5-canvas-data-as-image.html
Or send the html to the server and render it server-side:
https://github.com/visionmedia/screenshot-app or http://cutycapt.sourceforge.net/
Comments
You can use HTML5 canvas and the toDataURL method. For example:
var capture = function() {
var root = document.documentElement;
var canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'html:canvas');
var context = canvas.getContext('2d');
var selection = {
top: 0,
left: 0,
width: root.scrollWidth,
height: root.scrollHeight,
};
canvas.height = selection.height;
canvas.width = selection.width;
context.drawWindow(
window,
selection.left,
selection.top,
selection.width,
selection.height,
'rgb(255, 255, 255)'
);
return canvas.toDataURL('image/png', '');
};
You can adjust top, left, width and height to capture only a part of the web page.
The result is a data URI string. You can send it to your server or draw it on another canvas:
var canvas = document.getElementById('captured');
var ctx = canvas.getContext('2d');
var image = new Image();
image.src = capture();
// the image is not immediately usable
$(image).load(function() { // jquery way
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0);
});
Your plugin probably uses this method. You can also check its source code.
Edit: To send it to your server with JQuery you can do something like that:
$("#send-capture-button").click(function() {
$.post("/url-to-send-image-to", {image_data: capture()})
});
On the server side you'll have to decode the data URL.
Based on "Michaël Witrant" answer look at : Compile/Save/Export HTML as a PNG Image using Jquery
5 Comments
I put the canvas myself and did not use createElement line above
You probably need to add this line before drawWindow() to get security permissions from user. See http://murfy.de/read/webgl-drawWindow
netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
If you want to save the image as PNG etc, I found a useful script at: http://www.nihilogic.dk/labs/canvas2image/
Comments
After all i have decided to use the code php
GD and Image Functions
http://php.net/manual/en/ref.image.php
with this, i have created the specific html elements at specific positions with images.
thanks all for contributing.