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

Я пытаюсь загрузить SVG изображение в холст для манипуляции пиксельной мне нужен метод, как toDataURL или getImageData для SVGЕсть ли эквивалент метода canvas toDataURL для 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 (вы можете посмотреть источник)

источник

2010-07-03 Drew LeSueur

ли SVG изображение приходит из другого домена? Если это так, вы не можете вызывать 'toDataURL' или' getImageData', потому что холст не является «источником-чистым». –

Он приходит от * такой же * домена. Я даже попытался сделать «img.src =» данные: image/svg + xml; base64, ... »', но это также не сработало –

Это похоже на ошибку в Webkit: https: //bugs.webkit. org/show_bug.cgi? id = 39059 – stefanw

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

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

источник

2010-07-15 22:19:26 manalang

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

источник

2012-09-17 19:55:25 vladich

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

источник

2013-05-17 08:05:52

первой загрузки через библиотеку JS svg_todataurl.js и включить его

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

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

источник

2014-04-17 08:14:33 yellowcode

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

ответ

Смежные вопросы