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

Я пытаюсь загрузить изображение svg в холст для манипуляции с пикселями Мне нужен метод типа 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 (вы можете просмотреть исходный код)

Ответы

Ответ 1

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

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

Ответ 2

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

Ответ 3

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

Ответ 4

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

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

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