登录 立即注册

首页 > 绿虎论坛 > 网页插件 (发帖)

标题: [精]【网页插件】网页粘贴图片(修改js为阿里云),无需上传文件至服务器

作者: @Ta

时间: 2021-06-29发布,2022-06-17修改

点击: 19148
被下沉

利用base64编码,直接将图片写到帖子里,没有引入jq等三方库,不怕冲突,测试谷歌91、火狐78、Safari15可用,至于用base64的原因主要是因为懒得去看上传的api。。

鉴于网友都说过暴力,提供上传七牛版

阿里懒人版(复制一下两个js到插件中心)感谢 @读书顶个鸟用 提供的上传实例代码

导入网页插件:未命名(当前用户:0,总安装次数:0)
<script src="https://hu60.org/toastui-editor/spark-md5.min.js"></script>
<script src="http://file.hu60.cn/file/hash/js/983c474dc7ba81318d0e030cfda482456052.js?attname=file-hash-js-983c474dc7ba81318d0e030cfda482456052.js"></script>


图片

=======以下是原始 base64版本 ====

懒人版,直接引入js
导入网页插件:未命名(当前用户:0,总安装次数:0)
<script src="http://file.hu60.cn/file/hash/js/130b1799c0b90d26bf160db9db2be9b63520.js?attname=base64.js"></script>


或者复制代码
导入网页插件:未命名(当前用户:0,总安装次数:0)
<script>
document.addEventListener('paste', function (event) {
  console.log(event)
  var isChrome = false;
  if ( event.clipboardData || event.originalEvent ) {
    //not for ie11  某些chrome版本使用的是event.originalEvent
    var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
    if ( clipboardData.items ) {
      // for chrome
      var  items = clipboardData.items,
        len = items.length,
        blob = null;
      isChrome = true;
      //items.length比较有意思,初步判断是根据mime类型来的,即有几种mime类型,长度就是几(待验证)
      //如果粘贴纯文本,那么len=1,如果粘贴网页图片,len=2, items[0].type = 'text/plain', items[1].type = 'image/*'
      //如果使用截图工具粘贴图片,len=1, items[0].type = 'image/png'
      //如果粘贴纯文本+HTML,len=2, items[0].type = 'text/plain', items[1].type = 'text/html'
      // console.log('len:' + len);
      // console.log(items[0]);
      // console.log(items[1]);
      // console.log( 'items[0] kind:', items[0].kind );
      // console.log( 'items[0] MIME type:', items[0].type );
      // console.log( 'items[1] kind:', items[1].kind );
      // console.log( 'items[1] MIME type:', items[1].type );
 
      //阻止默认行为即不让剪贴板内容在div中显示出来
      //event.preventDefault();
 
      //在items里找粘贴的image,据上面分析,需要循环  
      for (var i = 0; i < len; i++) {
        if (items[i].type.indexOf("image") !== -1) {
          // console.log(items[i]);
          // console.log( typeof (items[i]));
 
          //getAsFile() 此方法只是living standard firefox ie11 并不支持        
          blob = items[i].getAsFile();
        }
      }
      if ( blob !== null ) {
        var reader = new FileReader();
        reader.onload = function (event) {
          // event.target.result 即为图片的Base64编码字符串
          var base64_str = event.target.result
          //可以在这里写上传逻辑 直接将base64编码的字符串上传(可以尝试传入blob对象,看看后台程序能否解析)
          uploadImgFromPaste(base64_str, 'paste', isChrome);
        }
        reader.readAsDataURL(blob); 
      }
    } else {
      //for firefox
      setTimeout(function () {
        //设置setTimeout的原因是为了保证图片先插入到div里,然后去获取值
        var imgList = document.querySelectorAll('#tar_box img'),
          len = imgList.length,
          src_str = '',
          i;
        for ( i = 0; i < len; i ++ ) {
          if ( imgList[i].className !== 'my_img' ) {
            //如果是截图那么src_str就是base64 如果是复制的其他网页图片那么src_str就是此图片在别人服务器的地址
            src_str = imgList[i].src;
          }
        }
        uploadImgFromPaste(src_str, 'paste', isChrome);
      }, 1);
    }
  } else {
    //for ie11
    setTimeout(function () {
      var imgList = document.querySelectorAll('#tar_box img'),
        len = imgList.length,
        src_str = '',
        i;
      for ( i = 0; i < len; i ++ ) {
        if ( imgList[i].className !== 'my_img' ) {
          src_str = imgList[i].src;
        }
      }
      uploadImgFromPaste(src_str, 'paste', isChrome);
    }, 1);
  }
})
 
function uploadImgFromPaste (file, type, isChrome) {
  var formData = new FormData();

var ele = document.getElementById("content");

ele.value = ele.value + "《图片:"+ file +",图片》";


}
</script>

视频链接


[隐藏样式|查看源码]


『回复列表(12|隐藏机器人聊天)』

2. 博客这样弄,是不是图片就不会丢失了
(/@Ta/2021-06-29 14:38//)

3. @ponyoung,博客内容一般存数据库了吧,数据库要是没了也就没了,而且我不知道这玩意性能怎么样,只是今天突发奇想
(/@Ta/2021-06-29 14:43//)

4. @ponyoung,而且很大一个原因是我不想去看虎绿林上传图片的接口🤣
(/@Ta/2021-06-29 14:46//)

7.
// 引入 MD5 计算组件 https://hu60.org/toastui-editor/spark-md5.min.js

fileUpload(blob, (url) => alert('上传成功:' + url));
function fileUpload(blob, callback) {
    let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
        file = blob,
        chunkSize = 2097152,               // Read in chunks of 2MB
        chunks = Math.ceil(file.size / chunkSize),
        currentChunk = 0,
        spark = new SparkMD5.ArrayBuffer(),
        fileReader = new FileReader();

    fileReader.onload = function (e) {
        spark.append(e.target.result);
        currentChunk++;

        if (currentChunk < chunks) {
            loadNext();
        } else {
            console.debug('完成hash计算');
            let fileMd5Hash = spark.end();
            console.debug(fileMd5Hash);
            fetch("/q.php/api.qiniu.json", {
                method: 'GET'
                ,credentials: 'same-origin'
                ,headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
                .then(response => response.json())
                .then(function (qiniu) {
                    console.debug('获取七牛云上传Token成功', qiniu);
                    let fileExt = blob.name.split('.').pop();

                    let formData = new FormData();
                    formData.append('file', blob);
                    formData.append('key', 'file-hash-' + fileExt + '-' + fileMd5Hash + blob.size + '.' + fileExt);
                    formData.append('token', qiniu.uptoken);
                    formData.append('name', blob.name);

                    console.debug('上传文件到七牛云');
                    fetch('https://' + qiniu.zone.cdnUpHosts[0], {
                        body: formData
                        ,method: 'POST'
                        ,credentials: 'same-origin'
                        ,headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                        .then(response => response.json())
                        .then(function (result) {
                            console.debug('文件上传成功', result)
                            callback('http://' + qiniu.host + '/' + result.key);
                        })
                        .catch(function (error) {
                            console.warn(error);
                            alert('上传失败:' + error);
                        });
                })
                .catch(function (error) {
                    console.warn(error);
                    alert('获取七牛云上传Token失败:' + error);
                });
        }
    };

    fileReader.onerror = function () {
        console.warn('oops, something went wrong.');
    };

    function loadNext() {
        var start = currentChunk * chunkSize,
            end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;

        fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
    }

    loadNext();
}
(/@Ta/2021-06-29 14:56//)

8.

还是上传到七牛云比较好,不然编辑帖子时不方便

(/@Ta/2021-06-29 14:57//)

9. @读书顶个鸟用,是的,我试下加上你这个函数
(/@Ta/2021-06-29 15:03//)

10. @读书顶个鸟用, 上传到七牛部分浏览器可能会有问题,太麻烦了,我放弃了
(/@Ta/2021-06-29 15:14//)

11.

@残缘 远古浏览器就不考虑兼容性问题了

(/@Ta/2021-06-29 15:20//)

12.
用户被禁言,发言自动屏蔽。
(/@Ta/2021-06-29 15:23//
被禁言
)

13. 图片
(/@Ta/2021-06-29 16:13//)

14. 图片
(/@Ta/2021-06-30 00:28//)

15. @残缘
(/@Ta/2023-03-02 09:48//)

回复需要登录

5月12日 21:24 星期天

本站由hu60wap6华为CPU驱动

备案号: 京ICP备18041936号-1