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