add 从剪贴板获取图片直接上传

lisz · lisz · commit 35c227e6366b · 2019-05-28T19:59:34.000+08:00
diff --git a/image.html b/image.html
@@ -1,36 +1,42 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset="utf-8">
-    <title>上传图片</title>
-    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
-    <style type="text/css">
-        #wrap{width: 300px;height:auto;padding: 15px;}
-        #showImage{position: absolute; top: 0;left: 0;}
-        #showImage img{width: 100px;height: auto;}
-        #imageList{padding-top: 15px;display: none;}
-        #imageList li{width: 50px;height: 50px;overflow: hidden;}
-        #imageList li a{display: block;}
-        #imageList li img{width: 50px;height: auto;}
-    </style>
-    <script type="text/javascript" src="./js/cos-js-sdk-v5.min.js"></script>
-    <script type="text/javascript" src="./js/image.js"></script>
+<meta charset="utf-8">
+<title>上传图片</title>
+<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+<style type="text/css">
+a {cursor: pointer;}
+#wrap{width: 400px;height:auto;padding: 15px;}
+#showImage{position: absolute; top: 0;right: 0;display: none;}
+#showImage img{max-height: 145px;width: auto;}
+#imageList{padding-top: 15px;display: none;max-height: 300px;overflow: auto;}
+#imageList li{width: 50px;height: 50px;overflow: hidden;}
+#imageList li a{display: block;}
+#imageList li img{width: 50px;height: auto;}
+#clipboardInput{margin:20px 0;}
+</style>
+<script type="text/javascript" src="js/cos-js-sdk-v5.min.js"></script>
+<script type="text/javascript" src="js/image.js"></script>
 </head>
 <body>
 <textarea style="display: block;position: absolute;top: -300px;" id="hidden"></textarea>
 <div id="wrap">
     <div id="pic">
         <button type="button" id="btn" class="btn btn-success">上传图片</button>
-        <a href="javascript:;" id="clean" class="btn btn-link">清除历史</a>
-        <span class="text-danger" id="tips" style="display: none;position: absolute;top: 20px;right: 30px;">复制成功</span>
+        <a href="#" id="clean" class="btn btn-link">清除历史</a>
+        <span class="text-danger" id="tips" style="display: none;position: absolute;top: 5px;left: 115px;">复制成功</span>
         <p class="help-block">点击图片复制内容</p>
         <input type="file" name="" id="file" style="display: none;">
+        <input type="text" name="clipboardInput" id="clipboardInput" class="form-control" placeholder="粘帖图片">
     </div>
-
     <ul id="imageList" class="list-inline">
 
     </ul>
 </div>
 
+<div id="showImage">
+    <img src="">
+</div>
+
 </body>
 </html>
diff --git a/js/image.js b/js/image.js
@@ -8,14 +8,15 @@ var image = {
         this.refreshImage();
         ID('imageList').style.display = 'block';
     },
+    // 初始化 绑定事件
     initEvent: function () {
         var that = this,
             file = ID('file');
 
         ID('btn').addEventListener('click', function () {
             that.start();
         });
-
+        // 上传图片
         file.addEventListener('change', function (e) {
             var file = e.target.files[0],
                 name = cos.getRandomName(this.value);
@@ -31,35 +32,66 @@ var image = {
             }
         });
 
+        // 鼠标移上 显示大图
+        ID('imageList').addEventListener('mouseover', function (e) {
+            var target = e.target || e.srcElement;
+            if (target.tagName === 'IMG') {
+                that.showBigImage(target.getAttribute('src'))
+            }
+        });
+
+        ID('imageList').addEventListener('mouseout', function (e) {
+            var target = e.target || e.srcElement;
+            if (target.tagName === 'IMG') {
+                ID('showImage').style.display = 'none';
+            }
+        });
+
+        // 粘帖图片
+        ID('clipboardInput').addEventListener('paste', function(event) {
+            var items = (event.clipboardData && event.clipboardData.items) || [];
+            var file = null;
+
+            if (items && items.length) {
+                for (var i = 0; i < items.length; i++) {
+                    if (items[i].type.indexOf('image') !== -1) {
+                        file = items[i].getAsFile();
+                        cos.send(cos.getRandomName(file.name), file);
+                        break;
+                    }
+                }
+            }
+        });
+
         // 清除历史
         ID('clean').addEventListener('click', function () {
             chrome.storage.sync.set({image: []}, function() {
                 that.refreshImage();
             });
         })
     },
+    // 点击上传按钮
     start: function () {
-        var that = this,
-            file = ID('file');
-        file.click();
+        ID('file').click();
     },
-    // 显示图片
+    // 加载本地历史 显示图片
     refreshImage: function () {
         chrome.storage.sync.get({image: []}, function(items) {
             var html = [];
             var images = items.image.reverse();
             for (var i=0;i<items.image.length;i++) {
-                html.push('<li><a href="javascript:;"><img src="'+items.image[i]+'"></a></li>');
+                html.push('<li><a href="#"><img src="'+items.image[i]+'"></a></li>');
             }
             ID('imageList').innerHTML = html.join('');
         });
     },
+    // 保存到本地记录
     insert: function (src) {
         var that = this;
         chrome.storage.sync.get({image: []}, function(items) {
             var data = items.image;
             data.push(src);
-            if (data.length > 10) {
+            if (data.length > 100) {
                 data.shift();
             }
             chrome.storage.sync.set({image: data}, function() {
@@ -69,6 +101,12 @@ var image = {
         });
         this.copy(src);
     },
+    // 显示大图
+    showBigImage (src) {
+        var image = document.querySelector('#showImage img');
+        image.setAttribute('src', src);
+        ID('showImage').style.display = 'block';
+    },
     // 复制文字
     copy: function (txt) {
         var op = ID('hidden');
@@ -93,6 +131,7 @@ var image = {
 };
 
 var cos = {
+    // 上传图片到腾讯云
     send: function (name, file) {
         var config = {
             SecretId: '',
@@ -125,7 +164,7 @@ var cos = {
     },
     // 获取随机文件名称
     getRandomName: function (name) {
-        var ext = name.split('.').pop(),
+        var ext = name ? name.split('.').pop() : '',
             d = new Date(),
             path = "/";
         path += d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
diff --git a/readme.md b/readme.md
@@ -1,10 +1,18 @@
+## `markdown`图片助手
 
-- 图片上传完成后自动加入剪贴板，保留10条历史记录
+![image](logo.png)
+
+- 截图后直接粘帖到文本框
+
+![image](https://note-1251721932.cos.ap-shanghai.myqcloud.com/2019-5-28/go0hk9pka7u.png)
+
+- 图片上传完成后自动加入剪贴板
 - 点击图片复制 `markdown` 格式图片
 - 需要配置[腾讯云存储参数](https://console.cloud.tencent.com/cos)
 
-![image](logo.png)
+| 来源 Origin | 操作 Methods | Allow-Headers | Expose-Headers | 超时 Max-Age |
+|-- | -- | -- | -- | -- |
+| * | PUT,GET,POST | * | ETag | 30 |
 
-![image](https://note-1251721932.cos.ap-shanghai.myqcloud.com/2018-7-12/fm0vr0bnk6h.png)
 
 ![image](https://note-1251721932.cos.ap-shanghai.myqcloud.com/2018-7-12/4fgtltq2xeg.png)
