将内联SVG转换为Base64字符串

Convert inline SVG to Base64 string

本文关键字：Base64 字符串 转换 SVG      更新时间：2023-09-26

我想向PHP脚本发送一个内联SVG图像，用Imagick将其转换为PNG。为此，我必须知道如何在内联SVG上获得base64字符串。对于画布对象，它是一个简单的".toDataURL（）"，但它不适用于内联SVG，因为它不是元素的全局函数。

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

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

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

使用XMLSerializer将DOM转换为字符串

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

然后btoa可以将其转换为base64

var encodedData = window.btoa(s);

只需准备数据URL介绍，即data:image/svg+xml;base64,，就可以了。

我只是试图收集并解释关于这个问题的所有伟大想法。这适用于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);

您可以相对直接地执行以下操作。简称

  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/

我在使用基于SVG的平面图编辑器时遇到了同样的问题，在绘制平面图后，我们必须将其保存以备将来使用。长话短说，代码比说话更好，这是对我有用的最后一个代码：

async saveFloorplan() {
  const svgElem = document.querySelector('#svg-element');
  let xmlSource = new XMLSerializer().serializeToString(svgElem);
  if (!xmlSource.match(/^<svg[^>]+xmlns="http:'/'/www'.w3'.org'/2000'/svg"/)) {
    xmlSource = xmlSource.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
  }
  if (!xmlSource.match(/^<svg[^>]+"http:'/'/www'.w3'.org'/1999'/xlink"/)) {
    xmlSource = xmlSource.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
  }
  // add xml declaration
  xmlSource = `<?xml version="1.0" standalone="no"?>'r'n${xmlSource}`;
  const svg64 = encodeURIComponent(xmlSource);
  const b64Start = 'data:image/svg+xml;charset=utf-8,';
  const imgEl = new Image();
  const image64 = b64Start + svg64;
  imgEl.src = image64;
  const blobResp = await fetch(imgEl.src);
  const blob = await blobResp.blob();
  const payload = {...}
  payload.fileExtension = 'svg';
  payload.fileSize = blob.size;
  const formData = new FormData();
  formData.append('file', blob);
  const uploaded = await api.uploadFile(formData);  
}

此行将执行转换：

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

请确保选择了正确的字符集/编码！

// 1. get the element
let e = document.getElementById("svg");
// 2. get the string representation of the element
var s = new XMLSerializer().serializeToString(e);
// or 
var s = e.outerHTML;
// 3. convert the string to url
// convert to utf8
var url = "data:image/svg+xml;utf8," + encodeURIComponent(s);
// convert to base64
var url = "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(s)));
// or
var url = "data:image/svg+xml;base64," + Buffer.from(s, "utf-8").toString("base64")
相关文章：