7

I want to use CSS to style an element on a webpage and then to use that element as a static png. Is it possible to draw html node on eg. canvas and save such image with transparency to a file?

I want to find a way to take already existing HTML with CSS and render it to PNG file keeping transparency.

Łukasz
  • 123
  • 1
  • 2
  • 6
  • I'm assuming you already know how to save an HTML5 canvas tag (that has transparent pixels) as a PNG file, and are hoping to do something comparable using plain HTML and CSS (saving the rendered HTML container, with transparency, as a PNG file). Is that correct? – Matt Coughlin Feb 19 '13 at 15:27
  • Sorry, I didn't saw your question. I will update question. – Łukasz Feb 20 '13 at 01:19

3 Answers3

10

Saving HTML elements to images requires a Complicated Answer!

First, for very good security reasons, browsers do not to allow same-page imaging of HTML elements. Imagine for example a malicious script that takes the HTML input form containing your banking username+password and converts it to an image and sends the image to a thief—not good!

Therefore, IE simply block same page HTML element imaging--period.

Chrome and Firefox might still have a feature (bug?!) that allows you to turn HTML elements into images like this: 1. Embed the HTML element into an SVG element using "foreignObject". 2. Draw the SVG element into a Canvas element. 3. Use canvas.toDataURL(‘image/png’) to get an encoded string representing the png image.

Since it looks like you are in control of styling the HTML, you might have a full solution by using a “headless” HTML generator like PhantomJs.org (phantomjs.org). You can use Phantomjs to generate and style the HTML element. PhantomJs then has a rasterizer you can use to convert that element into an image. Plus, If you can serve up a web page that contains only the styled HTML you need, then this 1 line of PhantomJs code will get you a png of that page:

phantomjs rasterize.js http://myHtmlOnMyPage.html myHtmlImage.png

The Chrome/Firefox code is found here: https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

And looks like this:

<!DOCTYPE html>
<html>
<body>
<p><canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
             "<foreignObject width='100%' height='100%'>" +
               "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
                 "<em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>cheese</span>" +
               "</div>" +
             "</foreignObject>" +
           "</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
};
img.src = url;
</script>
</body>
</html>
markE
  • 102,905
  • 11
  • 164
  • 176
  • 1
    Thank you very much for your fantastic answer. PhantomJS is something I was looking for - I had an idea to use webkit for rendering those elements with css and I'm really glad someone did it already;) Unfortunatelly there are problems with rendering shadows, which is very problematic for me but I hope to solve that problem with PhantomJs guys. Using svg trick doesn't support shadows at all - at least using chrome. – Łukasz Feb 20 '13 at 01:13
  • 1
    I don't see how the security argument holds water, since a malicious script can just send all form values to a thief. Turning it into an image first is unnecessary and would be inconvenient. – towr Dec 02 '15 at 08:43
  • @towr At the time, IE was riddled with "buffer overflow" vulnerabilities -- and canvas was one access point to exploit this vulnerability. But in general, think about all your private and sensitive things that you view in your browser and then think of someone being able to look over your shoulder and also see those things. – markE Dec 02 '15 at 15:03
2

Just found an easy way via Safari.

Right click on element, Inspect Element, then in the Inspector right click on the element node you want to export and pick Capture Screenshot. This to me resolves transparency. Safari Version 13.1 (14609.1.20.111.8)

enter image description here

PEZO
  • 441
  • 4
  • 14
0

Yes it is possible to save a HTML element as image (PNG file). See

Community
  • 1
  • 1
powtac
  • 40,542
  • 28
  • 115
  • 170
  • Thank you powtac, capturing canvas is not core problem here. Problem is rendering dom elements on canvas. – Łukasz Feb 20 '13 at 01:17