| 1 |
- <!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<title>图片Base64编码工具（DataURI数据）</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="../static/css/fe-imagebase64.css" />
<script type="text/javascript" src="../static/js/core/jquery-1.5.min.js"></script>
<script type="text/javascript" src="../static/js/mod/mod_imagebase64.js"></script>
</head>
<body>
<div class="wrapper">
<div class="panel panel-default" style="margin-bottom: 0px;">
<div class="panel-heading">
<h3 class="panel-title">
<a href="http://www.baidufe.com/fehelper/feedback.html" target="_blank" class="x-a-high">
<img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper
</a>：图片Base64编码工具
</h3>
</div>
</div>
<div class="panel-body mod-imagebase64">
<div class="row">
<table>
<tr>
<td>
<div class="x-panel">
<img id="preview" alt="">
<div class="x-tips">
<a id="upload" href="#">选择图片</a><br>
或者选择一张图片拖拽图片到这里来
</div>
</div>
</td>
<td>
<textarea id="result" title="点击自动选择" placeholder="内容会自动生成..." readonly></textarea>
<div class="x-result-info">
<div class="x-item">
<span class="x-title">原始图片大小：</span><span id="sizeOri">暂无数据</span>
</div>
<div class="x-item">
<span class="x-title">DataUri 大小：</span><span id="sizeBase">暂无数据</span>
</div>
</div>
</td>
</tr>
</table>
<div class="tips">
<b class="new">提示：</b>
1、支持屏幕截图后直接Ctrl + V；2、复制文件在此处粘贴，只能得到文件icon
</div>
<form action="#">
<input type="file" id="file" accept=".jpg,.jpeg,.gif,.png,.bmp">
</form>
<img id="img" alt="">
</div>
</div>
</div>
</body>
</html>
|
