save/export image file from html content?

Question

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, Jan 31 '12 at 07: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, Jan 31 '12 at 07:21
you want to save html content to an image file(jpg/png) like that? could you please be clear — run, Jan 31 '12 at 07:24
http://stackoverflow.com/questions/5941631/compile-save-export-html-as-a-png-image-using-jquery?lq=1 — Muthu Kumaran, Aug 09 '12 at 06:19

score 5 · Answer 1 · edited May 23 '17 at 12:08

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/

edited May 23 '17 at 12:08

Community

1
1

answered Jan 31 '12 at 07:31

Mario Michelli

523
1
5
11

score 3 · Answer 2 · edited May 23 '17 at 12:13

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

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] . but its giving error like- "Security error 'rgb(255, 255, 255)'", can u review ? — Bhavin Rana, Jan 31 '12 at 10:33
Uncaught TypeError: Object # has no method 'drawWindow' - error in chrome. — Bhavin Rana, Jan 31 '12 at 10:45
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 — Kasrak, Jan 31 '12 at 11:29
Take a look at this : https://developer.mozilla.org/en/DOM/CanvasRenderingContext2D — Kasrak, Jan 31 '12 at 11:33
This is not a HTML5-standard feature, it's only available in Firefox. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawWindow — Husky, Dec 01 '16 at 14:16

score 2 · Answer 3 · edited Jul 11 '12 at 10:28

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/

score 1 · Accepted Answer · answered Mar 30 '12 at 07:32

1

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.

answered Mar 30 '12 at 07:32

Bhavin Rana

1,554
4
20
40

save/export image file from html content?

4 Answers4

Linked