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

Barrior 发布于2019-08-22 10:39 / 1092人阅读

摘要：体验地址项目地址一个能够把字符串编码成图片，或者从图片中解码出字符串的超轻量级开源库，总代码数甚至不超过行使用方法通过安装通过标签引入值得注意的是，因为使用了的以及其他很棒的特性，这意味着需要你的浏览器提供支持。

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

SphinxJS

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

使用方法

通过npm安装

npm install sphinx.js

通过标签引入

值得注意的是，因为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

云服务器私有云把图片制作成视频的软件把图片制作成视频 js把字符串转成标签把自己的主机设置成云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91002.html

前端图像处理指南

摘要：本文会介绍位图处理，矢量图和图像处理，重点是，并且最后会附上一个小应用。以上列举部分，更多备胎在此矢量图处理讲完位图再说矢量图。矢量图在绘制图标商业动画元素上应用非常广范。计算机图像处理是一门很成熟的技术，任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制，处理起来会有诸多不便，这里所说的前端图像处理，是真的指不借助任何后端服务纯前端实现的图像...

Anshiii 2019-08-30 13:21 评论0 收藏0
前端图像处理指南

摘要：本文会介绍位图处理，矢量图和图像处理，重点是，并且最后会附上一个小应用。以上列举部分，更多备胎在此矢量图处理讲完位图再说矢量图。矢量图在绘制图标商业动画元素上应用非常广范。计算机图像处理是一门很成熟的技术，任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制，处理起来会有诸多不便，这里所说的前端图像处理，是真的指不借助任何后端服务纯前端实现的图像...

CatalpaFlat 2019-08-20 13:33 评论0 收藏0