如何在浏览器中使用JavaScript将HTML SVG节点转换为Base64

尽管通常情况下, 我们不应该将这种逻辑用于生产资料, 因为总有更好的选择来阻止你执行此操作, 有时这并不取决于你, 而是取决于第三方。无论你是从Web上剪贴内容, 还是创建修改某些矢量图像的自动化脚本, 了解如何将浏览器中渲染的SVG节点转换为base64格式的图片这一简单技巧都不会损害你。
考虑以下在浏览器的DOM中呈现的SVG元素的示例, 该元素具有一个使其成为dom一部分的id, 即mySvgElement：

< svg id="mySvgElement" xmlns="http://www.w3.org/2000/svg" height="179.2" width="179.2"> < g> < path transform="scale(0.1, -0.1) translate(0, -1536)" d="M1536 224v704q0 40 -28 68t-68 28h-704q-40 0 -68 28t-28 68v64q0 40 -28 68t-68 28h-320q-40 0 -68 -28t-28 -68v-960q0 -40 28 -68t68 -28h1216q40 0 68 28t28 68zM1664 928v-704q0 -92 -66 -158t-158 -66h-1216q-92 0 -158 66t-66 158v960q0 92 66 158t158 66h320 q92 0 158 -66t66 -158v-32h672q92 0 158 -66t66 -158z" style="& #10; fill: #03a9f4; & #10; "/> < /g> < /svg>

在浏览器中渲染后, 它将显示如下图片：

文章图片
为了将该元素转换为其base64表示形式, 我们只需要DOM元素和XMLSerializer类的帮助即可。 XMLSerializer接口提供了serializeToString()方法, 以构造表示DOM树的XML字符串。在我们的案例中, 使用上述元素, 我们将要做：

// 1. Keep a DOM reference to the SVG elementvar SVGDomElement = document.getElementById("mySvgElement"); // 2. Serialize element into plain SVGvar serializedSVG = new XMLSerializer().serializeToString(SVGDomElement); // 3. convert svg to base64var base64Data = http://www.srcmini.com/window.btoa(serializedSVG); // The generated string will be something like: // PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdm.........// If you want to display it in the browser via URL:console.log("data:image/svg+xml; base64, " + result);

请注意, 由XMLSerializer生成的序列化字符串将返回纯SVG, 因此将其编码为base64, 我们将获得纯base64数据：

PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTc5LjIiIHdpZHRoPSIxNzkuMiI+Cgk8Zz4KCQk8cGF0aCB0cmFuc2Zvcm09InNjYWxlKDAuMSwtMC4xKSB0cmFuc2xhdGUoMCwtMTUzNikiIGQ9Ik0xNTM2IDIyNHY3MDRxMCA0MCAtMjggNjh0LTY4IDI4aC03MDRxLTQwIDAgLTY4IDI4dC0yOCA2OHY2NHEwIDQwIC0yOCA2OHQtNjggMjhoLTMyMHEtNDAgMCAtNjggLTI4dC0yOCAtNjh2LTk2MHEwIC00MCAyOCAtNjh0NjggLTI4aDEyMTZxNDAgMCA2OCAyOHQyOCA2OHpNMTY2NCA5Mjh2LTcwNHEwIC05MiAtNjYgLTE1OHQtMTU4IC02NmgtMTIxNnEtOTIgMCAtMTU4IDY2dC02NiAxNTh2OTYwcTAgOTIgNjYgMTU4dDE1OCA2NmgzMjAgcTkyIDAgMTU4IC02NnQ2NiAtMTU4di0zMmg2NzJxOTIgMCAxNTggLTY2dDY2IC0xNTh6IiBzdHlsZT0iJiMxMDsgICAgZmlsbDogIzAzYTlmNDsmIzEwOyIvPgoJPC9nPgo8L3N2Zz4=

如果要使用数据URL表示形式在浏览器中显示它, 则需要在生成的数据” data：image / svg + xml; base64″ 中添加前缀：

data:image/svg+xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTc5LjIiIHdpZHRoPSIxNzkuMiI+Cgk8Zz4KCQk8cGF0aCB0cmFuc2Zvcm09InNjYWxlKDAuMSwtMC4xKSB0cmFuc2xhdGUoMCwtMTUzNikiIGQ9Ik0xNTM2IDIyNHY3MDRxMCA0MCAtMjggNjh0LTY4IDI4aC03MDRxLTQwIDAgLTY4IDI4dC0yOCA2OHY2NHEwIDQwIC0yOCA2OHQtNjggMjhoLTMyMHEtNDAgMCAtNjggLTI4dC0yOCAtNjh2LTk2MHEwIC00MCAyOCAtNjh0NjggLTI4aDEyMTZxNDAgMCA2OCAyOHQyOCA2OHpNMTY2NCA5Mjh2LTcwNHEwIC05MiAtNjYgLTE1OHQtMTU4IC02NmgtMTIxNnEtOTIgMCAtMTU4IDY2dC02NiAxNTh2OTYwcTAgOTIgNjYgMTU4dDE1OCA2NmgzMjAgcTkyIDAgMTU4IC02NnQ2NiAtMTU4di0zMmg2NzJxOTIgMCAxNTggLTY2dDY2IC0xNTh6IiBzdHlsZT0iJiMxMDsgICAgZmlsbDogIzAzYTlmNDsmIzEwOyIvPgoJPC9nPgo8L3N2Zz4=

现在应该产生：

【如何在浏览器中使用JavaScript将HTML SVG节点转换为Base64】编码愉快！