Преобразование строки в строку SVG в Base64

Я хочу отправить встроенное SVG-изображение в PHP-скрипт, чтобы преобразовать его в PNG с помощью Imagick. Для этого я должен знать, как получить base64 String на встроенном SVG. Для объектов canvas это простой «.toDataURL()», но это не работает с встроенными SVG, потому что это не глобальная функция элементов.Преобразование строки в строку SVG в Base64

test = function(){ 
    var b64 = document.getElementById("svg").toDataURL(); 
    alert(b64); 
}

http://jsfiddle.net/nikolang/ccx195qj/1/

Но как это сделать для встроенных SVGs?

источник

2015-02-11 Niko Lang

Это может помочь: http://stackoverflow.com/q/5495952/4200092 – GoBusto

Кто-нибудь нашел решение? –

Использование XMLSerializer для преобразования DOM в строку

var s = new XMLSerializer().serializeToString(document.getElementById("svg"))

, а затем btoa может конвертировать, что в base64

var encodedData = window.btoa(s);

Просто предварять URL данных интро т.е. data:image/svg+xml;base64, и там у вас есть.

источник

2015-02-11 09:35:33

Это не работает с образцом svg из-за символов не Latin1 в тексте (btoa barfs на этом). Протестировано на chrome 40. – collapsar

Поднимите Chrome, затем он работает в Firefox. –

Действительно, на хроме тоже (глупо, что я выбрал неправильную кодировку). – collapsar

Эта линия будет выполнять преобразование:

window.btoa($("svg").wrap("<div id='xyz'/>").parent().html());

Убедитесь, что правильный набор символов/кодирования выбран!

источник

2015-02-11 09:58:57 collapsar

Если вы не кодируете его base64, вам нужно будет закодировать URL как символ #, который довольно часто встречается в цветах. –

@RobertLongson Вы правы в том, что необходима некоторая кодировка (b64 удобна). Я имел в виду конкретный дополнительный код в объекте «Base64» из ответного ответа SO. Любой базовый 64-кодер, который обрабатывает его ввод строго как последовательность октетов (в отличие от символьного потока), будет делать. – collapsar

Вы можете сделать это относительно прямо следующим образом. Короткая версия

Сделать образ не привязан к йоту
Установите его размер в соответствии с источником svg
base64 закодировать исходный svg, добавьте соответствующие данные, установите img src

Get контекст canvas; .drawImage изображение

<script type="text/javascript"> 


    window.onload = function() { 
     paintSvgToCanvas(document.getElementById('source'), document.getElementById('tgt')); 
    } 



    function paintSvgToCanvas(uSvg, uCanvas) { 

     var pbx = document.createElement('img'); 

     pbx.style.width = uSvg.style.width; 
     pbx.style.height = uSvg.style.height; 

     pbx.src = 'data:image/svg+xml;base64,' + window.btoa(uSvg.outerHTML); 
     uCanvas.getContext('2d').drawImage(pbx, 0, 0); 

    } 


</script>

<svg xmlns="http://www.w3.org/2000/svg" width="467" height="462" id="source"> 
    <rect x="80" y="60" width="250" height="250" rx="20" style="fill:#ff0000; stroke:#000000;stroke-width:2px;" /> 
    <rect x="140" y="120" width="250" height="250" rx="40" style="fill:#0000ff; stroke:#000000; stroke-width:2px; fill-opacity:0.7;" /> 
</svg> 

<canvas height="462px" width="467px" id="tgt"></canvas>

источник

2016-06-05 23:50:39

Преобразование строки в строку SVG в Base64

ответ

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