zoukankan      html  css  js  c++  java
  • JS实现复制截图,自动显示图片,并上传图片到后端,源码自取

    https://fizzz.blog.csdn.net/article/details/111157198

    写博客的时候,很多作者会用到截图上传的功能,通过微信截图,QQ截图,直接将截取的图片通过Ctrl+v 复制到编辑器里。编辑器自动将图片上传,并返回图片地址,将图片渲染到页面上。今天我就给大家实现一个这样的功能。

    主要的知识点是,浏览的paste事件,clipboardData

    有关这两个属性的浏览器支持情况

    paste 一个标准的Dom事件,粘贴事件,会在用户按下Ctrl+v ,或者通过鼠标复制时触发.像其他事件一样,我们可以通过addEventListener为一个Element添加一个粘贴事件的监听函数 如以下代码

    document.addEventListener('paste', (event) => {
      console.log('粘贴事件', event)
    });
    
    • 1
    • 2
    • 3

    为了更清晰看到粘贴事件的内部的数据我们创建一个测试的html,内容如下

    <div>
      <textarea id="mytextarea"></textarea>
    </div>
    <script type="text/javascript">
      document.querySelector("#mytextarea").addEventListener('paste', function (event) {
        console.log(event)
      })
    </script>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    页面图片如下

    我们将123 复制到输入域中,

    打印的是event是一个叫做ClipboardEvent的对象,

    内部存在着一个叫做clipboardData的属性,这便是我们在复制时存储数据的对象。 其中的items就是我们要操作的对象,需要粘贴的元素都在其中存储。

    来看一个完整的例子

    
    <div class="container" style="text-align: center;">
      <textarea id="mytextarea"></textarea>
      <img id="myimg" width="200px" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1971621943,955938305&fm=26&gp=0.jpg" />
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
      document.querySelector("#mytextarea").addEventListener('paste', function (event) {
        var items = event.clipboardData.items;
        console.log(items[0], items[1])
    
        if (items && (items[0].type.indexOf('image') > -1 )) {
          var file = null // 用于存储图片文件
          file = items[0].getAsFile();
          console.log(file)
    
          // 直接显示到当前页面
          document.querySelector('#myimg').src = URL.createObjectURL(file)
    
          // 发送http请求到后端
          let sendData = new FormData()
          sendData.append('editormd-image-file', file)
    
          _ajax('https://www.ebaina.com/markdown/upload?guid=1607782819184', sendData, function (res) {
            console.log(res)
          })
        }
      })
    
      var _ajax = function (url, data, callback) {
        $.ajax({
          "type": 'post',
          "cache": false,
          "url": url,
          "data": data,
          "processData": false,
          contentType: "multipart/form-data; boundary=----WebKitFormBoundaryjtVDWJU59uHZpWAy",
          success: function (ret) {
            callback(ret);
          },
          error: function (err) {
            console.log('请求失败')
          }
        })
      }
    </script>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    解释一下代码的主要逻辑
    if (items && (items[0].type.indexOf('image') > -1 )) { ....... } 判断复制的对象是否是图片

    document.querySelector('#myimg').src = URL.createObjectURL(file) 将一个文件对象生成一个临时的本地地址并赋值给图片标签

    let sendData = new FormData()
    sendData.append('editormd-image-file', file)
    
    • 1
    • 2

    生成一个FormData对象,并将图片文件追加进去。因为上传图片必须要用FormData来传数据。

    介绍的这种方法已在最新版谷歌,火狐,360,Edge 测试通过。请尽情使用

  • 相关阅读:
    Lucene in action 笔记 case study
    关于Restful Web Service的一些理解
    Lucene in action 笔记 analysis篇
    Lucene in action 笔记 index篇
    Lucene in action 笔记 term vector
    Lucene in action 笔记 search篇
    博客园开博记录
    数论(算法概述)
    DIV, IFRAME, Select, Span标签入门
    记一个较困难的SharePoint性能问题的分析和解决
  • 原文地址:https://www.cnblogs.com/dabaixiong/p/14280204.html
Copyright © 2011-2022 走看看