SphinxJS——把字符串编码成 png 图片的超轻量级开源库

[jrainlau]

体验地址：https://jrainlau.github.io/sphinx/

项目地址：https://github.com/jrainlau/sphinx

SphinxJS

一个能够把字符串编码成 png 图片，或者从 png 图片中解码出字符串的超轻量级开源库，总代码数甚至不超过 100 行！

使用方法

通过npm安装

npm install sphinx.js

通过<script></script>标签引入

<script src="sphinx.js"></script>

值得注意的是，因为SphinxJS使用了 ES2015 的Promise以及其他很棒的特性，这意味着需要你的浏览器提供支持。否则的话，你可能需要Babel或者一些别的工具去构建你的代码。

SphinxJS同时支持以AMD，CommonJS以及ES6 模块的方式进行引用。

编码

定义一个字符串Hello Sphinx!，我们将对它进行编码

let base64URL = new Sphinx().encode('Hello Sphinx!')

然后你将得到一串base64编码

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAJklEQVQYV2P0SM35r8K1heE5owcDY2Zexf8dc1Yw/BdjYGBkQAIA+r4JjQKvLx4AAAAASUVORK5CYII=

到这一步，编码便已经完成了。

正如你所看到的那样，encode()方法返回一张图片的base64编码。

解码

定义一串图片的 url ：

let url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAJklEQVQYV2P0SM35r8K1heE5owcDY2Zexf8dc1Yw/BdjYGBkQAIA+r4JjQKvLx4AAAAASUVORK5CYII='

然后我们对其进行解码！

new Sphinx().decode(url)
    .then((info) => {
        console.log(info) // Hello Sphinx!
    })

decode()方法会返回一个Promise对象，它包含了从图片中解密出来的字符串信息。

配置

new Sphinx()能够接收一个用于定义图片类型的配置对象

• config {Object} 可选 默认值: {img: 'png'}

new Sphinx({img: 'bmp'})

证书

MIT

[YuJianrong]

本来想说这个用 Canvas 就能做，结果一看代码还真是……

顺便转 utf-8 string 的最简单做法是
unescape(encodeURI(str))

介于 unescape 已经废弃， mdn 上的推荐做法是
encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
return String.fromCharCode('0x' + p1);
})

最后，如果用 es6 的话我觉得 release 出去的时候最好 babel 编译一下吧……