尽管通常情况下, 我们不应该将这种逻辑用于生产资料, 因为总有更好的选择来阻止你执行此操作, 有时这并不取决于你, 而是取决于第三方。无论你是从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】编码愉快!
推荐阅读
- 如何使用Java AWT创建和显示Windows 10通知
- 如何检查PhantomJS收到了哪些Web资源
- 在JavaScript中从JSON创建可折叠树结构到HTML
- cocos2d-x从c++到js19(CoffeeScript开发环境搭建续)
- 一起玩转树莓派——从双色LED灯开始
- cocos2d-x从c++到js20(脚本语言风格的JS代码)
- cocos2d-x从c++到js21(使用CocosCode调试JSB)
- 一起玩转树莓派——树莓派模数/数模转换实践
- cocos2d-x从c++到js22(使用非侵入方式扩展UI系统接口的举例)