291 lines
20 KiB
HTML
291 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" class="uk-height-1-1">
|
||
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="hostname" content="feling.net">
|
||
<meta name="description" content="提供base64图片编码解码、json格式化、websocket联调等在线工具">
|
||
<meta name="keywords" content="base64图片,json格式化,base64编码解码">
|
||
<meta name="robots" content="all">
|
||
<meta name="author" content="feling.net">
|
||
<title>base64图片，json格式化，base64编码解码</title>
|
||
<link rel="stylesheet" href="//cdn-feling-net.oss-cn-beijing.aliyuncs.com/css/uikit.min.css" media="all">
|
||
<link rel="icon" type="image/png" href="//cdn.apihub.net/img/favicon.png">
|
||
<script src="//cdn.apihub.net/js/jquery-3.3.1.min.js"></script>
|
||
<script src="//cdn.apihub.net/js/vue.min.js"></script>
|
||
<script src="//cdn-feling-net.oss-cn-beijing.aliyuncs.com/js/uikit.min.js"></script>
|
||
</head>
|
||
|
||
<body class="uk-height-1-1">
|
||
<header>
|
||
<!-- 浏览器兼容性检测 -->
|
||
<div id="iiie"></div>
|
||
<script>
|
||
IIIE = new Vue({el:"#iiie"});
|
||
</script>
|
||
<script>
|
||
if (typeof IIIE == 'undefined') {
|
||
alert("该网页不支持您的浏览器版本，推荐使用 chrome 浏览器")
|
||
}
|
||
</script>
|
||
|
||
<!-- 网络联通性检测 -->
|
||
<div id="the-gfw"></div>
|
||
<script>
|
||
let gfw_tester = $.ajax({
|
||
url: "https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=xxx",
|
||
complete: function (data) {
|
||
if (data.statusText !== "timeout") {
|
||
$('#the-gfw').trigger('passible')
|
||
}
|
||
},
|
||
timeout: 2000
|
||
});
|
||
</script>
|
||
|
||
<nav class="uk-navbar">
|
||
<div href="/" class="uk-navbar-brand"
|
||
onmouseover="$('#brand-img').addClass('brand-img-animation')"
|
||
onmouseout="$('#brand-img').removeClass('brand-img-animation')">
|
||
<img alt="logo" id="brand-img" class="brand-img-animation" width="28px;" height="28px;"
|
||
src="//cdn.apihub.net/img/spinner.png" style="margin-top: 4px;">
|
||
</div>
|
||
<style>
|
||
.brand-img-animation {
|
||
animation: uk-rotate 0.8s;
|
||
animation-delay:0.4s;
|
||
}
|
||
</style>
|
||
<ul class="uk-navbar-nav">
|
||
<li class="uk-active"><a disabled>开发小工具</a></li>
|
||
<li><a href="/pages/">笔记</a></li>
|
||
</ul>
|
||
<div class="uk-navbar-flip">
|
||
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
<hr style="margin:0;">
|
||
|
||
<div id="content" style="
|
||
min-height:calc(100% - 90px - 40px - 17px);
|
||
padding-top: 15px;
|
||
padding-right: 15px;
|
||
overflow-x: hidden;">
|
||
|
||
<div style="margin-bottom:35px;">
|
||
<ul class="uk-tab" data-uk-tab="{connect:'#tab-gpt'}" style="margin-bottom:10px;">
|
||
<li class="uk-active" style="margin-left: 10px;"><a>GPT</a></li>
|
||
<li><a>搭建你自己的AI助手</a></li>
|
||
</ul>
|
||
<ul id="tab-gpt" class="uk-switcher uk-margin">
|
||
<li>
|
||
<a class="uk-button" style="margin: 0px 0px 10px 10px;" href="/gpt/">
|
||
<div style="text-align:left;font-size:18px">NextChat</div>
|
||
<hr style="margin:0">
|
||
<p style="text-align:left;font-size:11px;margin:0px;">Powered by ChatGPT-Next-Web</p>
|
||
</a>
|
||
</li>
|
||
<li style="margin: 10px 50px;">
|
||
<pre style="text-align:left;font-size:11px;">
|
||
docker run --name chatgpt-next-web -d -p 9999:3000 \
|
||
-e ENABLE_BALANCE_QUERY=1 \
|
||
-e OPENAI_API_KEY=hk-xxx \
|
||
-e CODE=xxx \
|
||
-e BASE_URL=https://api.openai-hk.com yidadaa/chatgpt-next-web</pre>
|
||
<a href="https://openai-hk.com/?i=22279" target="_blank">>> 搭建你自己的AI助手</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div style="margin-bottom:35px;">
|
||
<ul class="uk-tab" data-uk-tab="{connect:'#tab-1'}" style="margin-bottom:10px;">
|
||
<li class="uk-active" style="margin-left: 10px;"><a>联调自测</a></li>
|
||
<li><a>介绍</a></li>
|
||
</ul>
|
||
<ul id="tab-1" class="uk-switcher uk-margin">
|
||
<li>
|
||
<a class="uk-button" style="margin: 0px 0px 10px 10px;" href="/json/">
|
||
<div style="text-align:left;font-size:18px">Json 格式化</div>
|
||
<hr style="margin:0">
|
||
<p style="text-align:left;font-size:11px;margin:0px;">格式化、高亮、折叠你的 json 字符串</p>
|
||
</a>
|
||
|
||
<a class="uk-button" style="margin: 0px 0px 10px 10px;" href="/jwt/">
|
||
<div style="text-align:left;font-size:18px">JWT 解码</div>
|
||
<hr style="margin:0">
|
||
<p style="text-align:left;font-size:11px;margin:0px;">JSON Web Token 在线解码</p>
|
||
</a>
|
||
|
||
<a class="uk-button" style="margin: 0px 0px 10px 10px;" href="/base64/"
|
||
onclick="localStorage.base64_activeTab = 1;">
|
||
<div style="text-align:left;font-size:18px">Base64_图片</div>
|
||
<hr style="margin:0">
|
||
<p style="text-align:left;font-size:11px;margin:0px;">base64 编码、解码。支持图片、文字</p>
|
||
</a>
|
||
|
||
<a class="uk-button" style="margin: 0px 0px 10px 10px;" href="/base64/"
|
||
onclick="localStorage.base64_activeTab = 0;">
|
||
<div style="text-align:left;font-size:18px">Base64_字符串</div>
|
||
<hr style="margin:0">
|
||
<p style="text-align:left;font-size:11px;margin:0px;">base64 编码、解码。支持文字、图片</p>
|
||
</a>
|
||
|
||
<a class="uk-button" style="margin: 0px 0px 10px 10px;" href="/wsp/">
|
||
<div style="text-align:left;font-size:18px">WSP -- WebSocket 联调工具</div>
|
||
<hr style="margin:0">
|
||
<p style="text-align:left;font-size:11px;margin:0px;">用于 WebSocket 接口收发消息测试</p>
|
||
</a>
|
||
|
||
<a class="uk-button" style="margin: 0px 0px 10px 10px;" href="/unicode/">
|
||
<div style="text-align:left;font-size:18px">unicode 解码</div>
|
||
<hr style="margin:0">
|
||
<p style="text-align:left;font-size:11px;margin:0px;">\uxxxx 转中文</p>
|
||
</a>
|
||
|
||
<a class="uk-button" style="margin: 0px 0px 10px 10px;" href="/timestamp/">
|
||
<div style="text-align:left;font-size:18px">时间戳 ⇄ 时间</div>
|
||
<hr style="margin:0">
|
||
<p style="text-align:left;font-size:11px;margin:0px;">把 毫秒数 转成人类友好的字符串</p>
|
||
</a>
|
||
</li>
|
||
<li style="margin: 10px 50px;">
|
||
在前后端分离的结构中，通常使用http协议来建立前端程序与后端程序之间的通信。某些特殊的业务也许还会用到websocket协议。而在通信中最经常用到的数据格式，就是json。<br><br>
|
||
|
||
由于通信的双方是程序。<br>
|
||
json字符串通常是去掉空白符号的。<br>
|
||
表示图片时，通常会使用base64编码，这样统一用文本处理，写代码时更简单。<br>
|
||
表示时间时，通常会使用时间戳，以避免格式、时区带来的影响。<br><br>
|
||
|
||
但是，查看通信内容的不只是程序，开发工程师们也经常需要人工查看接口返回值。feling.net 的前后端联调工具，提供了：<br>
|
||
1. json格式化工具，可以对json字符串补充空白字符，即换行、空格、缩进等。支持语法高亮、折叠等功能。方便开发人员查看json格式。<br>
|
||
2. base64编码解码工具，可以方便的实现图片、文字与其对应base64编码之间的转换。<br>
|
||
3. websocket联调工具，用于测试websocket接口。<br>
|
||
4. 时间戳转换工具，可以把时间戳转换成人类友好的格式。<br><br>
|
||
|
||
网上可能随便一搜都能出来一大堆这样的工具，原本并没有什么动力自己做一套的。直到有一次见到同事使用网上随便搜索到的base64转图片的工具时。见到满屏的广告、选择上传图片后还需要手动选择图片格式？、手动再点个确定？、操作的窗口特别小等等糟糕的用户体验。
|
||
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div style="margin-bottom:35px;">
|
||
<ul class="uk-tab" style="margin-bottom:10px;">
|
||
<li class="uk-active" style="margin-left: 10px;">
|
||
<a href="javascript:return false;" style="
|
||
color: #000;
|
||
cursor:default;">ng echo</a>
|
||
</li>
|
||
</ul>
|
||
<div style="margin: 0px 0px 10px 10px;
|
||
display: inline-block;
|
||
box-sizing: border-box;
|
||
padding: 0 12px;
|
||
background: #eee;
|
||
vertical-align: middle;
|
||
line-height: 30px;
|
||
min-height: 30px;
|
||
font-size: 1rem;
|
||
text-decoration: none;
|
||
text-align: center;" >
|
||
<div style="text-align:left;font-size:18px">我的出口IP是多少？</div>
|
||
<hr style="margin:0">
|
||
<code style="text-align:left;font-size:11px;margin:0px;">
|
||
curl <a href="https://ip.feling.net" rel="nofollow">ip.feling.net</a>
|
||
</code>
|
||
</div>
|
||
<div style="margin: 0px 0px 10px 10px;
|
||
display: inline-block;
|
||
box-sizing: border-box;
|
||
padding: 0 12px;
|
||
background: #eee;
|
||
vertical-align: middle;
|
||
line-height: 30px;
|
||
min-height: 30px;
|
||
font-size: 1rem;
|
||
text-decoration: none;
|
||
text-align: center;" >
|
||
<div style="text-align:left;font-size:18px">现在几点了？</div>
|
||
<hr style="margin:0">
|
||
<code style="text-align:left;font-size:11px;margin:0px;">
|
||
curl <a href="https://api.feling.net/now" rel="nofollow">https://api.feling.net/now</a>
|
||
</code>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-bottom:35px;">
|
||
<ul class="uk-tab" data-uk-tab="{connect:'#tab-ws2s'}">
|
||
<li class="uk-active" style="margin-left: 10px;">
|
||
<a href="javascript:return false;" style="
|
||
color: #000;
|
||
cursor:default;">ws2s 系列</a>
|
||
</li>
|
||
<li><a>反思</a></li>
|
||
</ul>
|
||
<style>
|
||
#SvgjsSvg1035 {
|
||
margin: 10px 10px 0px 10px;
|
||
border: 1px #eee solid;
|
||
width: 740px;
|
||
}
|
||
@media(max-width: 460px) {
|
||
#SvgjsSvg1035 {
|
||
width:100%;
|
||
}
|
||
}
|
||
</style>
|
||
<ul id="tab-ws2s" class="uk-switcher uk-margin">
|
||
<li>
|
||
<svg style="margin-bottom: 10px;" viewBox="0 0 622 220" id="SvgjsSvg1035" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"><defs id="SvgjsDefs1036"><marker id="SvgjsMarker1052" markerWidth="16" markerHeight="12" refX="0" refY="6" viewBox="0 0 16 12" orient="auto" markerUnits="userSpaceOnUse"><path id="SvgjsPath1053" d="M15,1.5 L2,6 L15,10.5" fill="#323232" stroke="#323232" stroke-width="2"></path></marker><marker id="SvgjsMarker1054" markerWidth="16" markerHeight="12" refX="16" refY="6" viewBox="0 0 16 12" orient="auto" markerUnits="userSpaceOnUse"><path id="SvgjsPath1055" d="M0,2 L14,6 L0,11 L0,2" fill="#323232" stroke="#323232" stroke-width="2"></path></marker><marker id="SvgjsMarker1059" markerWidth="16" markerHeight="12" refX="0" refY="6" viewBox="0 0 16 12" orient="auto" markerUnits="userSpaceOnUse"><path id="SvgjsPath1060" d="M15,1.5 L2,6 L15,10.5" fill="#323232" stroke="#323232" stroke-width="2"></path></marker><marker id="SvgjsMarker1061" markerWidth="16" markerHeight="12" refX="16" refY="6" viewBox="0 0 16 12" orient="auto" markerUnits="userSpaceOnUse"><path id="SvgjsPath1062" d="M0,2 L14,6 L0,11 L0,2" fill="#323232" stroke="#323232" stroke-width="2"></path></marker></defs><rect id="SvgjsRect1037" width="622" height="220" fill="#ffffff"></rect><g id="SvgjsG1038" transform="translate(508,85)"><image id="SvgjsImage1039" xlink:href="https://cdn-feling-net.oss-cn-beijing.aliyuncs.com/images/KVStore.svg" width="89" height="86" preserveAspectRatio="none"></image><g id="SvgjsG1040"><foreignObject id="SvgjsForeignObject1041" width="129" height="32" x="-20" style="overflow:visible;" y="85"><div xmlns="http://www.w3.org/1999/xhtml" style="font-family: 微软雅黑; text-align: center; font-size: 13px; vertical-align: middle; color: rgb(50, 50, 50); font-weight: 400; line-height: 16px; width: 129px; word-break: break-word; border: 0px;">TCP server<div></div> such as redis</div></foreignObject></g></g><g id="SvgjsG1042" transform="translate(292,85)"><image id="SvgjsImage1043" xlink:href="https://cdn-feling-net.oss-cn-beijing.aliyuncs.com/images/ResilientNetworkIP.svg" width="86" height="86" preserveAspectRatio="none"></image><g id="SvgjsG1044"><foreignObject id="SvgjsForeignObject1045" width="126" height="16" x="-20" style="overflow:visible;" y="93"><div xmlns="http://www.w3.org/1999/xhtml" style="font-family: 微软雅黑; text-align: center; font-size: 13px; vertical-align: middle; color: rgb(50, 50, 50); font-weight: 400; line-height: 16px; width: 126px; word-break: break-word; border: 0px;">ws2s server</div></foreignObject></g></g><g id="SvgjsG1046" transform="translate(25,92.5)"><image id="SvgjsImage1047" xlink:href="https://cdn-feling-net.oss-cn-beijing.aliyuncs.com/images/Laptop.svg" width="114" height="71" preserveAspectRatio="none"></image><g id="SvgjsG1048"><foreignObject id="SvgjsForeignObject1049" width="154" height="32" x="-20" style="overflow:visible;" y="70"><div xmlns="http://www.w3.org/1999/xhtml" style="font-family: 微软雅黑; text-align: center; font-size: 13px; vertical-align: middle; color: rgb(50, 50, 50); font-weight: 400; line-height: 16px; width: 154px; word-break: break-word; border: 0px;">javaScript<div> running on a browser</div></div></foreignObject></g></g><g id="SvgjsG1050"><path id="SvgjsPath1051" d="M133 128L212.5 128L212.5 128L292 128" stroke-dasharray="8,5" stroke="#323232" stroke-width="2" fill="none" marker-start="url(#SvgjsMarker1052)" marker-end="url(#SvgjsMarker1054)"></path><foreignObject id="SvgjsForeignObject1056" width="65" height="16" x="180" y="120"><div xmlns="http://www.w3.org/1999/xhtml" style="vertical-align: top; text-align: center; color: rgb(50, 50, 50); line-height: 16px; font-size: 13px; font-family: 微软雅黑; white-space: nowrap; display: inline-block; background: rgb(255, 255, 255);">websocket</div></foreignObject></g><g id="SvgjsG1057"><path id="SvgjsPath1058" d="M378 128L443 128L443 128L508 128" stroke-dasharray="10,5,3,5" stroke="#323232" stroke-width="2" fill="none" marker-start="url(#SvgjsMarker1059)" marker-end="url(#SvgjsMarker1061)"></path><foreignObject id="SvgjsForeignObject1063" width="40" height="16" x="423" y="120"><div xmlns="http://www.w3.org/1999/xhtml" style="vertical-align: top; text-align: center; color: rgb(50, 50, 50); line-height: 16px; font-size: 13px; font-family: 微软雅黑; white-space: nowrap; display: inline-block; background: rgb(255, 255, 255);">socket</div></foreignObject></g><g id="SvgjsG1064" transform="translate(25,25)"><path id="SvgjsPath1065" d="M 0 0L 572 0L 572 40L 0 40Z" stroke="none" fill="none"></path><g id="SvgjsG1066"><foreignObject id="SvgjsForeignObject1067" width="572" height="25" x="0" style="overflow:visible;" y="7.5"><div xmlns="http://www.w3.org/1999/xhtml" style="font-family: 微软雅黑; text-align: center; font-size: 20px; vertical-align: middle; color: rgb(50, 50, 50); font-weight: 400; line-height: 25px; width: 572px; word-break: break-word; border: 0px;"><b>ws2s -- 让运行在浏览器上的 js 具备使用 socket 通信的能力</b></div></foreignObject></g></g></svg>
|
||
<div style="display: inline-block;margin: 10px 0px 0px 10px;" class="uk-text-top">
|
||
<p>使用案例：</p>
|
||
<a class="uk-button" style="margin: 0px 0px 10px 10px;" href="/redis/">
|
||
<div style="text-align:left;font-size:18px">Fredis</div>
|
||
<hr style="margin:0">
|
||
<p style="text-align:left;font-size:11px;margin:0px;">网页版 redis 客户端</p>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<li style="margin: 10px 50px;">
|
||
主要是 <code>反层次</code>, 应用层 代理 传输层, 是一件很低效的事情.<br>
|
||
然后, 基于传输层的开发, 会是一件庞大的事务. 注定了基于 ws2s 的开发不会太活跃.<br>
|
||
由于太庞大, 直接引入了 open-ssh 的功能, 已经不纯粹了, 说到底其实一开始只是因为 redis 的交互协议太简单, 才会想到做这种事.
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
<div style="display: block;height: 1px;overflow: hidden;">
|
||
<li><a href="/pages/base64.html">理解 Base64 编码</a></li>
|
||
<li><a href="/pages/rank_tip.html">垃圾页面提示</a></li>
|
||
<li><a href="/404.html">404页面提示</a></li>
|
||
<li><a href="/book/index.html">花边记账</a></li>
|
||
<li><a href="/proxy.pac">pac配置</a></li>
|
||
</div>
|
||
</div>
|
||
|
||
<hr style="margin:0">
|
||
<footer class="uk-grid uk-grid-small" style="background:#f6f6f6;padding: 10px 10px 0 10px;">
|
||
<div class="uk-width-small-1-1 uk-width-medium-1-3 uk-text-small uk-text-muted">
|
||
<span>
|
||
开源地址: <a href="https://git.apihub.net/APIHUB/feling.net" target="_blank">https://git.apihub.net/APIHUB/feling.net</a>
|
||
</span><br><br>
|
||
<span>
|
||
<a href="http://beian.miit.gov.cn" rel="nofollow">闽ICP备17033777号</a>
|
||
</span><br><br>
|
||
<br>
|
||
</div>
|
||
<script>
|
||
var _hmt = _hmt || [];
|
||
(function() {
|
||
var hm = document.createElement("script");
|
||
hm.src = "https://hm.baidu.com/hm.js?7926b3f77abd3abf9b3a5c3ff9608acc";
|
||
var s = document.getElementsByTagName("script")[0];
|
||
s.parentNode.insertBefore(hm, s);
|
||
})();
|
||
</script>
|
||
</footer>
|
||
</body>
|
||
</html>
|