Guardar HTML renderizado como imagen

I am building a web app that needs to export a div to an image. That div will contain images, other divs, text with css styling, etc. At the end, the user should have an image that would look the same as if he had taken a screenshot of that div. I 've looked into server-side php libs but I don't see anything that would handle the complexity of the rendered HTML. HTML5 canvas has that capability but I can't use a canvas for my case. Any ideas?


preguntado el 27 de agosto de 11 a las 22:08

you need a browser to render the image (kind of like You could then use a chrome/ff extension to take an image. You could even automate this on the server side with something like Selenium. -

> I can't use a canvas for my case ¿Por que no? -

this: <canvas>test</canvas> doesn't print anything. I am not so familiar with <canvas> but i am assuming its just for drawing and not wrapping html -

you could look into a rendering engine like phantomjs, and there are quite a few others that do HTML-to-PDF, so those might work for images as well. -

3 Respuestas

Más info: html2canvas. A javascript framework that renders the page content on a canvas element.

Respondido el 28 de Septiembre de 14 a las 16:09

Podrías envolver el div en un parche de canvas tag, access the pixel data directly, send that to a PHP script and use the data to construct an image.

Here's how you get the pixel data

And here's what you would use to create an image pixel by pixel

Respondido 28 ago 11, 02:08

That won't work at all I'm afraid. If you wrap any HTML in a canvas tag it will no longer be rendered by the DOM unless your browser has no canvas support. Even if it were to be rendered, the canvas image data is not affected by elements that are child nodes of the canvas element so no image data would be retrieved by using getImageData() since it's a blank canvas! - Rob Evans

I've written a project that converts HTML with CSS styles to canvas.

Está disponible aquí:

And an example test page is available here:

On the test page, the initial load will just show a square div with some other divs inside it with various stylings like backgrounds and borders including border radius etc. You'll see a button on the top-right of the page marked "Render". Click that and a canvas will be created and then the DOM will be parsed and rendered to the canvas. I intentionally changed the background colour of the canvas to black so you can see the difference.

respondido 13 nov., 12:13

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.