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

logo

体验地址: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


Jrain-前端玩具盆
记录一路以来的各种折腾。

Hiphop dancer,

12.9k 声望
11.6k 粉丝
0 条评论
推荐阅读
浅谈组件库和 SVG 图标库的解耦维护思路
任何的前端组件库,无论是业界内有名的 tdesign,ant-design 还是 element-ui 也好,它们都有着自己的一系列图标。经过观察发现,这些图标都是在组件库发布的时候就已经基本稳定了,鲜有调整,所以可以一直存放于...

jrainlau1阅读 2k

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.2k评论 12

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.9k评论 12

封面图
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs32阅读 3.5k评论 5

封面图
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan30阅读 3.9k评论 2

封面图
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城29阅读 6.4k评论 5

封面图
2022大前端总结和2023就业分析
我在年前给掘金平台分享了《2022年热点技术盘点》的前端热点,算是系统性的梳理了一下我自己对前端一整年的总结。年后,在知乎上看到《前端的就业行情怎么样?》,下面都是各种唱衰前端的论调,什么裁员,外包化...

i5ting27阅读 2.3k评论 4

封面图

Hiphop dancer,

12.9k 声望
11.6k 粉丝
宣传栏