| 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>
<script src="../static/vendor/require/require.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>：{{ toolName[curType] }}
<span class="x-switch ui-fl-r" ref="btnSwitch" @click="trans">切换为{{toolName[nextType]}}>></span>
</h3>
</div>
</div>
<div class="panel-body mod-imagebase64" ref="imageBase64" v-show="curType=='image'">
<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、支持<i>屏幕截图</i>后直接在此处粘贴进行转化<br/>2、支持<i>复制文件、复制图片</i>在线地址在此处直接粘贴进行转化
</div>
</td>
<td>
<textarea id="base64Result" title="点击自动选择" placeholder="内容会自动生成..." readonly ref="resultBox" @click="select()" v-model="resultContent" class="form-control"></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 class="panel-body mod-base64image" ref="base64Image" v-show="curType=='base64'">
<div class="row">
<table>
<tr>
<td>
<textarea id="base64Input" class="form-control" title="点击自动选择" placeholder="在这里粘贴DataURI数据..." v-model="txtBase64Input"></textarea>
</td>
<td>
<div class="x-panel">
<img id="base64Image" alt="" :src="txtBase64Input" v-show="!!txtBase64Input.length" @error="loadError">
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
|
