Lưu <svg> HTML5 vào PNG hoặc hình ảnh

Question

Tôi đã có biểu đồ được tạo bằng thư viện Javascript D3 và tôi cần lưu các tệp này vào tệp PNG hoặc SVG.

Có thư viện nào thực hiện công việc không?

Tôi thấy điều này https://github.com/sampumon/SVG.toDataURL nhưng không được làm việc trên html5 tôi, trong firefox console tôi đã nhận lỗi này:

NS_ERROR_NOT_AVAILABLE: Hợp phần không có sẵn [Interrompi mỗi questo errore]

ctx.drawImage (img, 0, 0);

Answer 1

kịch bản phương pháp Server-side

Dưới đây là một phương pháp đơn giản để tiết kiệm các yếu tố svg để png (mặc dù nó sử dụng server-side scripting, có thể khác với những gì bạn mong muốn): Thanh toán this page.

Theo tài liệu của tác giả, khách hàng trích xuất phần tử svg (sử dụng XMLSerializer.serializeToString) và gửi nó đến máy chủ; máy chủ chuyển đổi nó thành png và gửi lại cho máy khách. Máy chủ có thể sử dụng bất kỳ chương trình nào thuận tiện (chuyển đổi rsvg trong trường hợp này).

Canvg thư viện

Bạn có thể sử dụng thư viện này để làm điều này về phía khách hàng (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

Sử dụng nó như thế này:

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

Sau đó, bạn có thể sử dụng phương pháp toDataURL: document.getElementById('drawingArea').toDataURL('image/png');

Answer 2

Ví dụ phong phú từ developer.mozilla.org chứng minh cách xuất khẩu svg sang png sử dụng phần tử 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;