Apq
/
FeHelper
огледало од https://github.com/zxlie/FeHelper.git


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
							<!DOCTYPE HTML>
<html lang="zh-CN">
    <head>
        <title>图片Base64工具（DataURI数据）</title>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="../static/img/favicon.ico">
        <link rel="stylesheet" href="index.css" />
        <script type="text/javascript" src="../static/vendor/evalCore.min.js"></script>
        <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="https://www.baidufe.com/fehelper/index/index.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]}}&gt;&gt;</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&nbsp;&nbsp;大小：</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="txtBase64Output" v-show="!!txtBase64Input.length" @error="loadError">
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <div v-show="!!error.length" v-cloak class="x-error" v-html="error"></div>
        </div>

        <script type="text/javascript" src="index.js"></script>

        <script src="../static/vendor/jquery/jquery-3.3.1.min.js"></script>
    </body>
</html>