Render HTML element as PNG image?

Question

Is there a better way to convert a rendered HTML element as a PNG image that is scalable and not pixellated?

The design goal is to render the page in HTML+CSS (simple, allows user to copy/paste text as a data table, etc.) but to copy/save widgets as an image to copy to PowerPoint etc. For other reasons, it's very helpful to do it client-side inside an RIA.

This works okay, rendering element to canvas using html2canvas, converting that to PNG, then showing it inside a dialog the user can right-click on to save or copy to clipboard (JSFiddle at http://jsfiddle.net/8ypxW/3/ ):

     html2canvas($("#widget"), {
        onrendered: function(canvas) {
            document.body.appendChild(canvas);
            // Convert and download as image 
            Canvas2Image.saveAsPNG(canvas); 
            $("#img-out").append(canvas);
        }
    });

The only challenge is that the image is visibly blurry/pixellated, especially on Mac Retina and doesn't offer scalable text like a PNG image is otherwise capable of.

I suspect there's no good way around canvas, and canvas is pixels-based, but have been wrong before. jQuery or other libraries okay. Modern browser only is okay too. Even just getting better pixel resolution is helpful

Rendering via SVG is a detour but also an option if that's possible to do client side. This link suggests it requires something server side: http://bl.ocks.org/mbostock/6466603

Render HTML to an image

Answer 1

I want to give you a bit more information on this, seeing that there's a bit confusion, i sense.

The two main render methods you are thinking of is vector and raster. Raster is rendered with pixels (formats include JPG, PNG24, PNG8, GIF), whereas vector is rendered as scientific formulas (file formats SVG, Ai), making them scalable (hence you get the name 'scalable vector graphics').

These have two types of compression for these: lossy and lossless.

Lossy means pixelated (it has a interpolated colouring in blurry pixels from one colour to another). This is often times because you're zooming into an image too much, and you see it's not crisp at 9000% zooming. JPG and PNG24 is the best file examples.

Lossless means that it's not blurry. GIFs can be a good example: there are steps between the two colours, either being colour1 or colour2, not an interpolation.

In the case of vectors there can be gradients in the solid shapes, but on the border of a solid shape (Think something like text), even if you zoom in a million times, it will be crisp.

Back to your post, you will actually need a HTML to SVG converter, if you want better quality. Also check out http://pngcrush.com/

Hope this helps!