| 1 |
- <!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<title>图片Base64编码工具（DataURI数据）</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css" />
<script type="text/javascript" src="../static/vendor/vue/vue.js"></script>
</head>
<body>
<div class="wrapper" id="pageContainer">
<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" ref="panelBox">
<img id="preview" alt="" :src="previewSrc" v-show="!!previewSrc.length">
<div class="x-tips">
<a id="upload" href="#" ref="uploadBox" @click="upload($event)">选择图片</a><br>
或者选择一张图片拖拽图片到这里来
</div>
</div>
<div class="tips">
1、支持屏幕截图后直接：Ctrl+V / Cmd+V<br/>2、复制文件在此处直接：Ctrl+V / Cmd+V
</div>
</td>
<td>
<textarea id="result" title="点击自动选择" placeholder="内容会自动生成..." readonly ref="resultBox" @click="select()" v-model="resultContent"></textarea>
<div class="x-result-info">
<div class="x-item">
<span class="x-title">原始图片大小：</span><span id="sizeOri">{{sizeOri}}</span>
</div>
<div class="x-item">
<span class="x-title">DataUri 大小：</span><span id="sizeBase">{{sizeBase}}</span>
</div>
</div>
</td>
</tr>
</table>
<form action="#">
<input type="file" id="file" accept=".jpg,.jpeg,.gif,.png,.bmp" ref="fileBox" @change="convert()">
</form>
<img id="img" alt="">
</div>
</div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
|
