javascript - 如何将 DIV 导出到图像

Question

我想将 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 对象的生成图像/屏幕截图。

Answer 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.

Answer 2

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

我没有亲自使用它，但 canvg 可能是一个开始：https ://code.google.com/p/canvg/