Zapisz <svg> HTML5 do PNG lub obrazu

Question

Mam generowane wykresy z biblioteką JavaScript D3 i muszę je zapisać do pliku PNG lub SVG.

Czy istnieje jakaś biblioteka, która wykonuje tę pracę?

Znalazłem to https://github.com/sampumon/SVG.toDataURL ale nie działa na moim HTML5, w konsoli firefox mam ten błąd:

NS_ERROR_NOT_AVAILABLE: Komponent nie jest dostępny [Interrompi za Questo errore]

ctx.drawImage (img, 0, 0);

Answer 1

Server-side metoda skrypt

Oto prosty sposób, aby zapisać elementy SVG do PNG (choć używa skryptów po stronie serwera, który może być różny od tego, co można się spodziewać): kasę this page.

Zgodnie z dokumentacją autora, klient wyodrębnia element svg (przy użyciu XMLSerializer.serializeToString) i wysyła go na serwer; serwer konwertuje go na png i odsyła z powrotem do klienta. Serwer może korzystać z dowolnego wygodnego programu (w tym przypadku rsvg-convert).

Canvg biblioteka

Możesz użyć tej biblioteki to zrobić po stronie klienta (check it out!):

canvg is a SVG parser and renderer. It takes a URL to a SVG file or the text of an SVG file, parses it in JavaScript, and renders the result on a Canvas element

używać go tak:

//load a svg snippet in the canvas with id = 'drawingArea' 
canvg(document.getElementById('drawingArea'), '<svg>... </svg>') 

Następnie można użyć metody toDataURL: document.getElementById('drawingArea').toDataURL('image/png');

Answer 2

Ex dużo od developer.mozilla.org demonstrując jak eksportować svg do png używając elementu canvas.

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' + 
      '<foreignObject width="100%" height="100%">' + 
      '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' + 
      '<em>I</em> like ' + 
      '<span style="color:white; text-shadow:0 0 2px blue;">' + 
      'cheese</span>' + 
      '</div>' + 
      '</foreignObject>' + 
      '</svg>'; 

var DOMURL = window.URL || window.webkitURL || window; 

var img = new Image(); 
var svg = new Blob([data], {type: 'image/svg+xml'}); 
var url = DOMURL.createObjectURL(svg); 

img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
    DOMURL.revokeObjectURL(url); 
    var png_img = canvas.toDataURL("image/png"); 
} 

img.src = url;