0

I'd like to export a div to a PNG or JPG image. Basically the div has an appended a two.js object. Two.js draws with SVG which means I can't use those canvas toDataURL alternatives I guess.

The two.js instance is a 400 by 400px box including a basic grid (horizontal & vertical lines) made using two.makeLine(x1,y1,x2,y2).

JavaScript should return a generated image/screenshot of that div or two.js object if possible.

ChrisWue
  • 18,612
  • 4
  • 58
  • 83
Rok
  • 787
  • 9
  • 17

2 Answers2

1

You can always switch the rendering contexts in two.js and two.js always provides a reference to the elements it creates. e.g:

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.
jonobr1
  • 1,013
  • 2
  • 11
  • 22
0

You could have a look at a way to plot your SVG into a canvas. Then toDataURL-ing the result.

I haven't personally used it, but canvg could be a start: https://code.google.com/p/canvg/

Larixk
  • 116
  • 5