新增图片Base64工具

支持拖拽

chrome/manifest.json

@@ -1,6 +1,6 @@
 { 
 	"name": "WEB前端助手(FeHelper)", 
-	"version": "5.4",
+	"version": "5.5",
     "manifest_version": 2,
 	 
 	"default_locale": "zh_CN", 

chrome/online.manifest.json

@@ -1,11 +1,11 @@
 {
     "name": "WEB前端助手(FeHelper)",
-    "version": "5.4",
+    "version": "5.5",
     "manifest_version": 2,
 
     "default_locale": "zh_CN",
 
-    "description": "FE助手：包括字符串编解码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成器、编码规范检测、页面性能检测、栅格检测、JS运行效率分析等",
+    "description": "FE助手：包括字符串编解码、图片base64编码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成器、编码规范检测、页面性能检测、栅格检测、JS运行效率分析等",
 	"icons": { 
 		"16": "static/img/fe-16.png",
 		"48": "static/img/fe-48.png",

chrome/static/css/fe-imagebase64.css

@@ -0,0 +1,88 @@
+html {
+	background:url(../img/baidufe_bj.gif);
+	font-size: 14px;
+}
+body{
+	font-family:Arial,"simsun";
+	color:#666;
+}
+
+.mod-imagebase64 {
+	width:980px;
+	margin:0 auto;
+}
+.mod-imagebase64 fieldset {
+	border : 1px solid #bbb;
+	padding:10px;
+	width:960px;
+	margin-bottom: 10px;
+    background: #fff;
+}
+.mod-imagebase64 fieldset legend {
+	padding:0 5px;
+	color:red;
+}
+
+.-e-x-container {
+	width:980px;
+	margin:0 auto;
+	padding:30px 0 50px 0;
+	min-height:400px;
+}
+table {
+    width:100%;
+    table-layout: fixed;
+}
+td {
+    width:50%;
+}
+td .x-panel {
+    width: 450px;
+    height:400px;
+    background: #fff url(../img/image_default.png) center 120px no-repeat;
+    border:4px dashed #ddd;
+    position: relative;
+    text-align: center;
+}
+td .x-panel .x-tips {
+    position: absolute;
+    top:280px;
+    left:26%;
+    color:#aaa;
+    text-align: center;
+}
+#upload {
+    font-size: 20px;
+    background: #00b7ee;
+    border-radius: 3px;
+    line-height: 44px;
+    height: 45px;
+    padding: 0 30px;
+    color: #fff;
+    display: inline-block;
+    margin: 5px auto 15px;
+    cursor: pointer;
+    box-shadow: 0 1px 1px rgba(0,0,0,.1);
+    text-decoration: none;
+}
+#upload:hover {
+    background: #00a2d4;
+}
+#preview {display: none;max-width: 260px;max-height: 260px;margin-top:10px;border:2px solid #ccc;}
+form {display: none}
+td textarea {
+    width: 470px;
+    height:405px;
+    padding:0;margin:0;
+    resize:none;outline:none;
+    background: #fcfcfc;
+    border:1px solid #ddd;
+}
+.-e-x-footer {
+	text-align:center;
+	font-size:12px;
+	margin-top:30px;
+	color:#00c;
+	padding:5px;
+	display:none;
+}

chrome/static/css/fe-popup.css

@@ -79,6 +79,9 @@ ul.fe-function-list li.-x-timestamp b {
 ul.fe-function-list li.-x-codecompress b {
     background-position:-65px -81px;
 }
+ul.fe-function-list li.-x-base64 b {
+    background-position:-33px -209px;
+}
 .fe-feedback {
 	font-size:12px;
 	border-top:1px dotted #ddd;

chrome/static/js/core/fe-const.js

@@ -73,6 +73,8 @@ const MSG_TYPE = {
     CODE_BEAUTIFY : 'codebeautify',
     // 时间转换
     TIME_STAMP : 'timestamp',
+    // 图片base64
+    IMAGE_BASE64 : 'imagebase64',
 
     //页面json代码自动格式化
     AUTO_FORMART_PAGE_JSON : "opt_item_autojson"

chrome/static/js/imagebase64/main.js

@@ -0,0 +1,54 @@
+/**
+ * 图片base 64编码
+ * @author xianliezhao
+ */
+var ImageBase64 = (function () {
+
+    var _getDataUri = function (file) {
+        var reader = new FileReader();
+        reader.onload = function (evt) {
+            $('#result').val(evt.target.result);
+            $('#preview').attr('src', evt.target.result).show();
+            $('td .x-panel').css('background-image', 'none');
+        };
+        reader.readAsDataURL(file);
+    };
+
+    var _bindEvent = function () {
+        $('textarea').bind('click', function (e) {
+            this.select();
+        });
+
+        var $file = $('#file').change(function (e) {
+            if (this.files.length) {
+                _getDataUri(this.files[0]);
+                this.value = '';
+            }
+        });
+
+        $('#upload').click(function (e) {
+            e.preventDefault();
+            $file.trigger('click');
+        });
+
+        $(document).bind('drop',function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            var files = e.originalEvent.dataTransfer.files;
+            if (files.length) {
+                if (/image\//.test(files[0].type)) {
+                    _getDataUri(files[0]);
+                } else {
+                    alert('请选择图片文件！');
+                }
+            }
+        }).bind('dragover', function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+            });
+    };
+
+    $(function () {
+        _bindEvent();
+    });
+})();

chrome/static/js/mod/mod_imagebase64.js

@@ -0,0 +1,22 @@
+(function ( /*importstart*/ ) {
+    var scripts = document.getElementsByTagName('script'),
+        length = scripts.length,
+        src = scripts[length - 1].src,
+        pos = src.indexOf('/static/'),
+        scriptPath = src.substr(0, pos) + '/static/';
+    if (!window.importScriptList) window.importScriptList = {};
+    window.importScript = function (filename) {
+        if (!filename) return;
+        if (filename.indexOf("http://") == -1 && filename.indexOf("https://") == -1) {
+            if (filename.substr(0, 1) == '/') filename = filename.substr(1);
+            filename = scriptPath + filename;
+        }
+        if (filename in importScriptList) return;
+        importScriptList[filename] = true;
+        document.write('<script src="' + filename + '" type="text/javascript" charset="utf-8"><\/' + 'script>');
+    }
+})( /*importend*/ )
+
+importScript("js/core/core.js");
+importScript("js/core/fe-const.js");
+importScript("js/imagebase64/main.js");

chrome/template/fehelper_imagebase64.html

@@ -0,0 +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="mod-imagebase64 -e-x-container">
            <fieldset>
                <legend>图片Base64编码工具</legend>
                <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></td>
                    </tr>
                </table>
                <form action="#">
                    <input type="file" id="file" accept=".jpg,.jpeg,.gif,.png,.bmp">
                </form>
                <img id="img" alt="">
            </fieldset>
        </div>
    </body>
</html>