java base64 svg转jpg_将 SVG 放置在 img 中显示及浏览器 base64 编码

将 SVG 放置在 img 中显示及浏览器 base64 编码

base64 编码增强

浏览器本身是拥有 Base64 功能的，对应的编码和解码是btoa()与atob()，但其存在一个问题：只支持 ASCII 字符。而几乎在大部分情况下，我们需要的字符集都应该是 UTF-8，而其并不能很好地进行编码操作，会提示如下错误：

VM2479:1 Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

at :1:1

为了扩展其功能，可以先将非 ASCII 字符转换为另一种表示形式。在 HTML 中，恰好就有 HTML 转义字符很符合这一需求。

大概思路就是首先对字符进行替换，而后再使用btoa()进行编码，实现如下：

const base64 = str => window.btoa(str.replace(/[\u00A0-\u2666]/g, c => `${c.charCodeAt(0)};`));

将 svg 放在 img 中

最简单的办法是，但这并不是想描述的情形。假定 svg 本身就需要作为页面的一部分，而非单独的文件。

如果存在前端图标的使用经验，可以得知 svg 本身是可以以 base64 作为链接成为页面的一部分的。

而实际上，svg 甚至不需要 base64 转码都可以作为 img 的链接值。

如下述两种写法，就是等价的使用 base64 和直接使用 svg 作为 img 链接的形式。

对于简单的需求，直接使用 svg 可能就足够了，但是实际使用中，svg 内部可能会包含各种有特殊含义的符号。比如双引号，是不可以出现在 src 中的。诸如此类的问题将会导致直接使用 svg 作为 img 的链接非常麻烦。

而如果使用 base64 则可以很好地解决该问题。对于存在特殊符号的 svg，则可以使用上述改进的 base64 函数即可(base64 本身也是支持 HTML 转义的)

参考资料