Comment puis-je exporter un DIV vers une image

Question

Je voudrais exporter un div vers une image PNG ou JPG. Fondamentalement, la div a un objet two.js en annexe. Two.js dessine avec SVG ce qui signifie que je ne peux pas utiliser ces canvas toDataURL alternatives je suppose.

L'instance two.js est une boîte de 400 par 400 pixels comprenant une grille de base (lignes verticales horizontales &) réalisée à l'aide de two.makeLine(x1,y1,x2,y2). JavaScript devrait renvoyer une image/capture d'écran générée de cet objet div ou two.js si possible.

Answer 1

Vous pouvez toujours changer les contextes de rendu dans two.js et two.js toujours fournit une référence aux éléments qu'il crée . par exemple:

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

Vous pouvez jeter un coup d'œil sur un moyen de tracer votre SVG dans un canevas. Puis toDataURL -sur le résultat.

Je n'ai pas personnellement utilisé, mais canvg pourrait être un début: https://code.google.com/p/canvg/