JS实现复制截图，自动显示图片，并上传图片到后端，源码自取

谁借莪１个温暖的怀抱￠ 2022-12-28 04:05 117阅读 0赞

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

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

有关这两个属性的浏览器支持情况  
![b96ae6d69bc2de97074ae42b55f36053.png][]

![14e2761af9a7bbf9ca57003dfa6a0b1f.png][]

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

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

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

<div>
      <textarea id="mytextarea"></textarea>
    </div>
    <script type="text/javascript"> document.querySelector("#mytextarea").addEventListener('paste', function (event) { console.log(event) }) </script>

页面图片如下

我们将123 复制到输入域中，  
![375adfe08843b6ed49448a8e668804d4.png][]

打印的是`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>

![b114aaf0964a5f444726eaa21a31881d.gif][]

解释一下代码的主要逻辑  
`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)

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

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

[b96ae6d69bc2de97074ae42b55f36053.png]: /images/20221120/8baa46be40884ce3895802e21bd6b447.png
[14e2761af9a7bbf9ca57003dfa6a0b1f.png]: /images/20221120/2f67f97f7e344dc6a8ac685d927ddcaa.png
[375adfe08843b6ed49448a8e668804d4.png]: https://img-blog.csdnimg.cn/img_convert/375adfe08843b6ed49448a8e668804d4.png
[b114aaf0964a5f444726eaa21a31881d.gif]: https://img-blog.csdnimg.cn/img_convert/b114aaf0964a5f444726eaa21a31881d.gif