脚本宝典收集整理的这篇文章主要介绍了

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p><span class="img-wrap"><img data-src="/img/bVC6vf?w=172&amp;h=209" src="/img/bVC6vf?w=172&amp;h=209" alt="logo" title="logo" style="cursor: pointer; display: inline;"></span></p> <blockquote> <p>体验地址:<a href="https://jrainlau.github.io/sphinx/" rel="nofollow noreferrer" target="_blank"></a><a href="https://jrainlau.github.io/sphinx/" rel="nofollow noreferrer" target="_blank">https://jrainlau.github.io/sp...</a><br />项目地址:<a href="https://github.com/jrainlau/sphinx" rel="nofollow noreferrer" target="_blank"></a><a href="https://github.com/jrainlau/sphinx" rel="nofollow noreferrer" target="_blank">https://github.com/jrainlau/s...</a></p> </blockquote> <h2 id="articleHeader0">Sph<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>xJS</h2> <p>一个能够把字符串编码成png图片,或者从png图片中解码出字符串的超轻量级开源库,总代码数甚至不超过100行!</p> <h2 id="articleHeader1">使用方法</h2> <p>通过<code>npm</code>安装</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install sphinx.js" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword"><a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>st<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a></span> sphinx.js</code></pre> <p>通过<code>&lt;script&gt;&lt;/script&gt;</code>标签引入</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<script src=&quot;sphinx.js&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"sphinx.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <blockquote> <p>值得注意的是,因为<code>Sph<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>xJS</code>使用了ES2015的<code><a href="http://www.js-code.com/tag/promis" title="Promis" target="_blank">Promis</a>e</code>以及其他很棒的特性,这意味着需要你的浏览器提供支持。否则的话,你可能需要<code>Babel</code>或者一些别的工具去构建你的代码。</p> <p><code>SphinxJS</code>同时支持以<code>AMD</code>,<code>CommonJS</code>以及<code><a href="http://www.js-code.com/tag/es6%e6%a8%a1%e5%9d%97" title="ES6模块" target="_blank">ES6模块</a></code>的方式进行引用。</p> </blockquote> <h2 id="articleHeader2">编码</h2> <p>定义一个字符串<code>Hello Sphinx!</code>,我们将对它进行编码</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="let base64URL = new Sphinx().encode('Hello Sphinx!')" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code style="word-break: break-word; white-space: initial;"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> base64URL = <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> Sphinx().encode(<span class="hljs-string">'Hello Sphinx!'</span>)</code></pre> <p>然后你将得到一串<code>base64</code>编码</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAJklEQVQYV2P0SM35r8K1heE5owcDY2Zexf8dc1Yw/BdjYGBkQAIA+r4JjQKvLx4AAAAASUVORK5CYII=" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;"><span class="hljs-string">data:</span><a href="http://www.js-code.com/tag/image" title="浏览关于“image”的文章" target="_blank" class="tag_link">image</a><span class="hljs-regexp">/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/</span>AAAAJklEQVQYV2P0SM35r8K1heE5owcDY2Zexf8dc1Yw/BdjYGBkQAIA+r4JjQKvLx4AAAAASUVORK5CYII=</code></pre> <p>到这一步,编码便已经完成了。</p> <p>正如你所看到的那样,<code>encode()</code>方法返回一张图片的<code>base64</code>编码。</p> <h2 id="articleHeader3">解码</h2> <p>定义一串图片的url:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="let url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAJklEQVQYV2P0SM35r8K1heE5owcDY2Zexf8dc1Yw/BdjYGBkQAIA+r4JjQKvLx4AAAAASUVORK5CYII='" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code style="word-break: break-word; white-space: initial;"><span class="hljs-keyword">let</span> url = <span class="hljs-string">'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAJklEQVQYV2P0SM35r8K1heE5owcDY2Zexf8dc1Yw/BdjYGBkQAIA+r4JjQKvLx4AAAAASUVORK5CYII='</span></code></pre> <p>然后我们对其进行解码!</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="new Sphinx().decode(url) .then((info) => {<br /> console.log(info) // Hello Sphinx!<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs coffeescript"><code><span class="hljs-keyword">new</span> Sphinx().decode(url) .<span class="hljs-keyword">then</span>(<span class="hljs-function"><span class="hljs-params">(info)</span> =&gt;</span> { <span class="hljs-built_in">console</span>.log(info) <span class="hljs-regexp">//</span> Hello Sphinx! })</code></pre> <p><code>decode()</code>方法会返回一个<code><a href="http://www.js-code.com/tag/promise" title="Promise" target="_blank">Promise</a></code>对象,它包含了从图片中解密出来的字符串信息。</p> <h2 id="articleHeader4">配置</h2> <p><code><a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> Sphinx()</code>能够接收一个用于定义图片类型的配置对象</p> <ul> <li> <p>config {<a href="http://www.js-code.com/tag/Object" title="Object" target="_blank">Object</a>} <code>可选</code> 默认值: <code>{img: 'png'}</code></p> </li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="new Sphinx({img: 'bmp'})" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code style="word-break: break-word; white-space: initial;"><span class="hljs-selector-tag">new</span> <span class="hljs-selector-tag">Sphinx</span>({<span class="hljs-attribute">img</span>: <span class="hljs-string">'bmp'</span>})</code></pre> <h2 id="articleHeader5">证书</h2> <p>MIT</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过