如何将 DIV 导出到图像答案

【问题标题】：How can I export a DIV to an Image如何将 DIV 导出到图像
【发布时间】：2013-08-14 09:23:03
【问题描述】：

我想将 div 导出为 PNG 或 JPG 图像。基本上 div 有一个附加的 two.js 对象。 Two.js 使用 SVG 绘制，这意味着我不能使用那些画布 toDataURL 我猜的替代品。

two.js 实例是一个 400 x 400 像素的盒子，包括一个使用 two.makeLine(x1,y1,x2,y2) 制作的基本网格（水平线和垂直线）。

如果可能，JavaScript 应该返回该 div 或 two.js 对象的生成图像/屏幕截图。

【问题讨论】：

【解决方案1】：

您始终可以在 two.js 中切换渲染上下文，而 two.js 始终提供对其创建的元素的引用。例如：

var two = new Two({ type: Two.Types.canvas }).appendTo(document.body);
var canvas = two.renderer.domElement;
var dataURL = canvas.toDataURL('img/png');
// Though this data will be blank because there's nothing being rendered.

【讨论】：

【解决方案2】：

您可以查看一种将 SVG 绘制到画布中的方法。然后toDataURL-ing 结果。

我还没有亲自使用过，但是 canvg 可以作为一个开始：https://code.google.com/p/canvg/

【讨论】：