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

Jrain發表於2018-12-27
JS字串編碼

寫於 2016.09.13

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

體驗地址：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

相關文章