12

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].

4
  • 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. Commented 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. Commented Jan 31, 2012 at 7:21
  • you want to save html content to an image file(jpg/png) like that? could you please be clear Commented Jan 31, 2012 at 7:24
  • stackoverflow.com/questions/5941631/… Commented Aug 9, 2012 at 6:19

4 Answers 4

5

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/

Sign up to request clarification or add additional context in comments.

Comments

3

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

Thanks for response ! [not used to wid canvas] i m ckecking this script in the testfile, for this i have included the js file at the top. [taken form w3s example] <script type="text/javascript" src="ui.streamride.net/ui.js"></script>. but its giving error like- "Security error 'rgb(255, 255, 255)'", can u review ?
Uncaught TypeError: Object #<CanvasRenderingContext2D> has no method 'drawWindow' - error in chrome.
Make sure the version you are using supports HTML5, As a suggestion you could try Firefox 9 with firebug for debugging, sorry I do not have time to test it for you
This is not a HTML5-standard feature, it's only available in Firefox. See developer.mozilla.org/en-US/docs/Web/API/…
2

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

0

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.