Có tương đương với phương pháp toDataURL của canvas cho SVG không?

Question

Tôi cố gắng để tải một hình ảnh svg vào vải cho thao tác Pixel Tôi cần một phương pháp như toDataURL hoặc getImageData cho svg

trên Chrome/Safari tôi có thể cố gắng làm việc đó thông qua và hình ảnh và canvas

var img = new Image() 
img.onload = function(){ 
    ctx.drawImage(img,0,0) //this correctly draws the svg image to the canvas! however... 
    var dataURL = canvas.toDataURL(); //SECURITY_ERR: DOM Exception 18 
    var data = ctx.getImageData(0,0,img.width, img.height).data //also SECURITY_ERR: DOM Exception 18 
    } 
    img.src = "image.svg" //that is an svg file. (same domain as html file :)) 

Nhưng tôi nhận được lỗi bảo mật. Bất kỳ cách nào khác?

Đây là một bản demo trực tiếp của vấn đề http://clstff.appspot.com/gist/462846 (bạn có thể xem mã nguồn)

Answer 1

Từ: http://www.svgopen.org/2009/papers/12-Using_Canvas_in_SVG/#d4e105

Lý do tại sao bạn không thể sử dụng một yếu tố hình ảnh SVG làm nguồn cho các phương pháp drawImage đơn giản, nhưng đau đớn: thông số Vải hiện tại không (chưa) cho phép tham chiếu SVGImageElement dưới dạng nguồn cho drawImage và chỉ có thể đối phó với HTMLImageElement, HTMLCanvasElement và HTMLVideoelement. ngắn sắp tới này hy vọng sẽ được giải quyết trong quá trình xác định hành vi "SVG trong HTML5" và cũng có thể được mở rộng để cho phép SVGSVGElement. Phần tử xhtml: img trong danh sách 3 sử dụng khả năng hiển thị: ẩn vì chúng tôi không muốn nó để can thiệp vào bản sao có thể nhìn thấy của nó trên Canvas.

Answer 2

Có, bạn không thể làm điều đó trực tiếp, nhưng bạn có thể sử dụng canvg cho điều đó, ý tôi là vẽ SVG thành Canvas và nhận url dữ liệu từ Canvas. Nó không phải không có lỗi, đặc biệt là cho xử lý gradient phức tạp, nhưng tôi đã có một số kinh nghiệm tích cực với nó.

Answer 3

var dataUrl = 'data:image/svg+xml,'+encodeURIComponent(svgString); 

Answer 4

đầu tiên tải về thư viện js svg_todataurl.js và bao gồm nó

sau đó chỉ cần dán mã này

var SVGtopngDataURL = document.getElementById("svg_element_id").toDataURL("image/png");