javascript - 将内联 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, 即可。