js利用clipboardData在网页中实现截屏粘贴的功能

cuieney 发布于2019-08-21 10:55 / 1832人阅读

摘要：最近在做一个将屏幕截图直接粘贴发送的功能，于是对此做了一些研究，下面是具体的实现代码代码如下，在这里只是简单的做了一个框用作演示截屏粘贴具体实现在中保存在剪贴板中的数据类型判断是否为图片数据读取该图片下面是讲粘贴的图片内容传送到后端进行

最近在做一个将屏幕截图直接粘贴发送的功能，于是对此做了一些研究，下面是具体的实现代码：
html代码如下，在这里只是简单的做了一个textare框用作演示




  
  
  截屏粘贴

具体实现在JavaScript中：

function paste(event){
  var clipboardData = event.clipboardData;
  console.log(clipboardData);
  var items,item,types;
  if( clipboardData ){
    items = clipboardData.items;
    if( !items ){
      return;
    }
    // 保存在剪贴板中的数据类型
    types = clipboardData.types || [];
    for(var i=0 ; i < types.length; i++ ){
      if( types[i] === "Files" ){
        item = items[i];
        break;
      }
    }
    // 判断是否为图片数据
    if( item && item.kind === "file" && item.type.match(/^image//i) ){
      // 读取该图片
      var file = item.getAsFile(),
          reader = new FileReader();
      reader.readAsDataURL(file);
      console.log(reader);
      //下面是讲粘贴的图片内容传送到后端进行处理，如果直接前端处理可以不要后边的代码
      var xhr = new XMLHttpRequest();
      xhr.open("post", "/pasteImage",true);
      xhr.setRequestHeader("Content-Type", "application/json");
      reader.onload = function(){
        console.log(reader.result);
        xhr.send(JSON.stringify({
          file: reader.result
        }));
      };
      //接收返回数据
      xhr.onload = function(){
        var response = JSON.parse(xhr.responseText);
        if(response.code == 200){
        //
        }else{
        //
        }
      }
    }
  }
}

云服务器 GPU云服务器 js手机复制粘贴功能 js获得粘贴的数据网页截屏 fec在webrtc中实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86417.html

javascript在网页中实现粘贴qq截图功能

摘要：这篇文章主要介绍了在网页中实现读取剪贴板粘贴截图功能即可以把剪贴板的截图粘贴到网页的一个输入框中例如截图旺旺截图或者其它截图软件。这篇文章主要介绍了在网页中实现读取剪贴板粘贴截图功能,即可以把剪贴板的截图Ctrl+V粘贴到网页的一个输入框中,例如QQ截图、旺旺截图或者其它截图软件。具体代码如下。利用 clipboardData 在网页中实现截屏粘贴的功能 #box{ wi...

Barry_Ng 2019-08-02 15:55 评论0 收藏0
javascript在网页中实现粘贴qq截图功能

摘要：这篇文章主要介绍了在网页中实现读取剪贴板粘贴截图功能即可以把剪贴板的截图粘贴到网页的一个输入框中例如截图旺旺截图或者其它截图软件。这篇文章主要介绍了在网页中实现读取剪贴板粘贴截图功能,即可以把剪贴板的截图Ctrl+V粘贴到网页的一个输入框中,例如QQ截图、旺旺截图或者其它截图软件。具体代码如下。利用 clipboardData 在网页中实现截屏粘贴的功能 #box{ wi...

RichardXG 2019-08-19 18:26 评论0 收藏0
【在网页中获取截图数据】Chrome和Firefox下的实战经验

摘要：最近在实现一个功能，需求如下前提当前页面无弹窗页面任意位置执行粘贴读取剪切板中的截屏数据上传截图首先还是从网上找相关的例子。找到了上的专栏文章获取剪切板内容，控制图片粘贴。最近在实现一个功能，需求如下：前提：当前页面无弹窗页面任意位置执行粘贴读取剪切板中的截屏数据上传截图首先还是从网上找相关的例子。找到了SF上的专栏文章《js获取剪切板内容，js控制图片粘贴》。于是...

vslam 2019-08-19 17:49 评论0 收藏0
js 粘贴图片的应用(clipboardData)

摘要：起因应项目需求，需要用某个工具截图然后粘贴上传到后台的功能于是着手搜查资料，最终的结果就是找到了这个对象，然后开始着手一谷歌浏览器相信这个也是很多开发者都在用的浏览器，当然也是尝试的开始。 clipboardData 起因：应项目需求，需要用某个工具截图然后粘贴上传到后台的功能！于是着手搜查资料，最终的结果就是找到了这个对象clipboardData，然后开始着手！一、谷歌chrom...

Euphoria 2019-08-22 16:21 评论0 收藏0
js获取剪切板内容，js控制图片粘贴。

摘要：在用户执行粘贴操作的时候，能够获得剪切板的内容，本文讨论一下这个问题。目前只有支持获取剪切板中的图片数据。这么多的判断条件，基本可以确定通过剪切板过来的是粘贴的文件。在用户执行粘贴操作的时候，js能够获得剪切板的内容，本文讨论一下这个问题。目前只有Chrome支持获取剪切板中的图片数据。还好需要这个功能的产品目前只支持Chrome和Safari，一些Chrome的新特性是可以尽情使...

KaltZK 2019-08-19 17:22 评论0 收藏0