体验地址:https://jrainlau.github.io/sp...
项目地址:https://github.com/jrainlau/s...

SphinxJS

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

使用方法

通过npm安装

npm install sphinx.js

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

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

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

SphinxJS同时支持以AMDCommonJS以及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

如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的文章

8 条评论
极乐君 · 2016年09月13日

沙发一个!

回复

jrainlau 作者 · 2016年09月13日

哈哈,感谢支持!

回复

黄弘 · 2016年09月14日

要是能把信息藏在现有图片里,还能拿到图片便能解出,那就更妙了

回复

jrainlau 作者 · 2016年09月14日

欢迎fork,然后把你的想法加进去~

回复

艾尼菲楠 · 2016年09月14日

好吧,可以把磁力链接拿来存进去

回复

艾尼菲楠 · 2016年09月14日

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAaklEQVQYVxXFMQqDQBBA0T8o6bzD9i7BKCrrbZImpEiXK8ZK1BCxsNpjiOCO+Jon7/tTJU7olpgm7ITbF3l8XnppV0ad2NcIyS3iykyxFQwjaWHp5x9Su1LZAtdIISvQ/o8YYxTAey/npwMdgSOHl4gkHwAAAABJRU5ErkJggg=="/>

回复

为梦想而生 · 2016年09月14日

感觉挺厉害的但是没发现用处在什么地方

回复

jrainlau 作者 · 2016年09月14日

哈哈,确实不太实用,只能说提供了一种思路吧

回复

载入中...
jrainlau jrainlau

3k 声望

发布于专栏

Jrain-前端养成记

分享自己的学习体验,开发心得,搬运墙外的干货,欢迎关注!

170 人关注

SegmentFault

一起探索更多未知

下载 App