SphinxJS——把字符串編碼成png圖片的超輕量級開源庫

寫於 2016.09.13

體驗地址：jrainlau.github.io/sphinx/ 項目地址：github.com/jrainlau/sp…

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