Есть ли эквивалент метода toDataURL для SVG?

Question

Я пытаюсь загрузить изображение svg в canvas для манипуляции с пикселями. Мне нужен метод, подобный toDataURL или getImageData для svg

в Chrome / Safari.

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 :))

Но я получаю ошибки безопасности.Другим способом?

Вот живая демонстрация проблемы http://clstff.appspot.com/gist/462846 (вы можете просмотреть источник)

Answer 1

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

Answer 2

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

Причина, по которой вы не можете использовать элемент изображения SVG в качестве источника для метода drawImage, проста, но болезненна: текущая спецификация Canvas не (пока) не позволяетссылка на SVGImageElement как источник для drawImage и может работать только с HTMLImageElement, HTMLCanvasElement и HTMLVideoelement.Надеемся, что этот недостаток будет устранен в процессе определения поведения «SVG в HTML5» и может быть расширен для включения SVGSVGElement.Элемент xhtml: img в листинге 3 использует visibility: hidden, поскольку мы не хотим, чтобы он мешал отображению его копии на Canvas.

Answer 3

сначала загрузите js-библиотеку svg_todataurl.js и включите ее

затем просто вставьте этот код

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

Answer 4

Да, вы не можете сделать это напрямую, но вы можете использовать canvg для этого, я имею в виду, чтобы нарисовать SVG в Canvas и получить URL-адрес данных из Canvas. Это не без ошибок, особенно для сложной обработки градиентов, но у меня был некоторый положительный опыт с этим.