V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
jrainlau
V2EX  ›  JavaScript

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

  •  
  •   jrainlau · 2016-09-14 23:22:15 +08:00 · 1753 次点击
    这是一个创建于 2974 天前的主题,其中的信息可能已经有所发展或是发生改变。

    体验地址: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同时支持以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

    YuJianrong
        1
    YuJianrong  
       2016-09-15 19:14:34 +08:00
    本来想说这个用 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 编译一下吧……
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5632 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 07:39 · PVG 15:39 · LAX 23:39 · JFK 02:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.