将HTML元素渲染为PNG图像？

有没有更好的方法将呈现的HTML元素转换为可缩放且不像素化的PNG图像？

设计目标是在HTML + CSS中呈现页面(简单,允许用户将文本复制/粘贴为数据表等),但是将小部件复制/保存为图像以复制到PowerPoint等.出于其他原因,它是在RIA中做客户端非常有帮助.

这没关系,使用html2canvas将元素渲染到画布,将其转换为PNG,然后在对话框中显示它,用户可以右键单击以保存或复制到剪贴板(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);
        }
    });

唯一的挑战是图像明显模糊/像素化,特别是在Mac Retina上,并且不提供像PNG图像那样的可扩展文本.

我怀疑画布周围没有好办法,画布是基于像素的,但之前是错误的.jQuery或其他库没关系.现代浏览器也没关系.即使只是获得更好的像素分辨率也很有用

通过SVG渲染是一种绕道,但如果可以做客户端,也可以选择.此链接表明它需要服务器端:http://bl.ocks.org/mbostock/6466603

将HTML渲染为图像