将内联SVG转换为Base64字符串

Question

我想将内联SVG图像发送到PHP脚本,以使用Imagick将其转换为PNG.为此,我必须知道如何在内联SVG上获取base64字符串.对于canvas对象,它是一个简单的".toDataURL()"但不适用于内联SVG,因为它不是元素的全局函数.

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

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

但是如何为内联SVG做到这一点？

Answer 1

使用XMLSerializer将DOM转换为字符串

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

然后btoa可以将其转换为base64

var encodedData = window.btoa(s);

只需在数据URL前面添加,即data:image/svg+xml;base64,您拥有它.

Answer 2

我只是试图收集和解释关于这个问题的所有伟大的想法。这适用于 Chrome 76 和 Firefox 68

var svgElement = document.getElementById('svgId');

// Create your own image
var img = document.createElement('img');

// Serialize the svg to string
var svgString = new XMLSerializer().serializeToString(svgElement);

// Remove any characters outside the Latin1 range
var decoded = unescape(encodeURIComponent(svgString));

// Now we can use btoa to convert the svg to base64
var base64 = btoa(decoded);

var imgSource = `data:image/svg+xml;base64,${base64}`;

img.setAttribute('src', imgSource);

Answer 3

您可以如下相对直接地进行操作。简短的版本是

1. 使图像不附加到dom
2. 设置其大小以匹配源 svg
3. base64编码源svg，附加相关数据，设置img src

4. 获取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>
   

JSFiddle：https：//jsfiddle.net/oz3tjnk7/