目前仅有高版本的 Chrome 浏览器支持这样直接粘贴，其他浏览器目前为止还无法粘贴,不过火狐和ie11浏览器在可编辑的div中能够粘贴截图的图片也是base64位和Chrome利用clipboardData的效果是一样的，只是在火狐和ie11浏览器中目前还无法实现类似用clipboardData直接获取图片的base64数据，它是自带的直接进去img数据

完整实例：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>利用clipboardData在网页中实现截屏粘贴的功能</title>
<style type="text/css">
    .box{ width:500px; height:300px; border:1px solid #ddd; }
    .box img{max-width:480px; max-height: 100%; text-align: center;}
</style>
</head>
<body>
<div class="box" contenteditable="true" id="testInput">
</div>
<script type="text/javascript">
(function(){
    var imgReader = function( item ){
        var blob = item.getAsFile(),
            reader = new FileReader();
        reader.onload = function( e ){
            var img = new Image();
            img.src = e.target.result;
            console.log(img);
            document.getElementById('testInput').appendChild( img );
        };
        reader.readAsDataURL( blob );
    };

document.getElementById( 'testInput' ).addEventListener( 'paste', function( e ){
        //window.clipboardData.getData("Text") ie下获取黏贴的内容 e.clipboardData.getData("text/plain")火狐谷歌下获取黏贴的内容
        //alert(e.clipboardData.getData("text/plain") )
        var clipboardData = e.clipboardData,//谷歌
            i = 0,
            items, item, types;
             console.log('0')

if( clipboardData ){
             console.log('1')
            items = clipboardData.items;
            if( !items ){
                console.log(2)
                return;
            }
            console.log(3)
            item = items[0];
            types = clipboardData.types || [];
            for( ; i < types.length; i++ ){
                if( types[i] === 'Files' ){
                    item = items[i];
                    break;
                }
            }
            if( item && item.kind === 'file' && item.type.match(/^image\//i) ){
                imgReader( item );
            }
         }
     },false);
})();
</script>

</script>

</body>
</html>

实例二：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="div" style="width:100%;height:700px;border:1px solid #ccc;padding:20px" contenteditable="true"></div>
  <script>
    var div = document.getElementById('div');
    div.addEventListener('paste', function(e) {
      if(e.clipboardData) {
        for(var i = 0; i < e.clipboardData.items.length; i++) {
          var c = e.clipboardData.items[i];
          var f = c.getAsFile();
          var reader = new FileReader();
          reader.onload = function(e) {
            div.innerHTML += '<img src="' + e.target.result + '">';
          }
          reader.readAsDataURL(f);
        }
      }
    });
  </script>
</body>
</html>

实现的方法：

方法一：

在Chrome浏览器中能够直接通过clipboardData获取截图的图片数据，可以用ajax将数据传给后台，然后由后台开发返回带域名的图片地址

方法二：

由于在火狐等浏览器中无法直接获取图片数据，所以可以在粘贴的时候获取div中的img的数据是base64的url数据，然后同方法一用ajax

方法三：

可以统一在点击发布或者保存消息时，获取div中的img的数据是base64的url数据，然后同方法一用ajax，如果有多张就循环，也或者是直接点击保存和发布的时候，后端开发做处理，返回来的显示信息中直接做处理，这样我们在div中就不需要把base64的url替换成后端返回的带域名的地址

方法四：

在div中粘贴的时候弹出一个弹出层，然后弹出层中有截图的图片预览可确认上传按钮，点击上传按钮走ajax上传图片同方法一

js利用clipboardData在网页中实现截屏粘贴的功能的更多相关文章

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

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  2. C#使用phantomjs 进行网页整页截屏

    C#使用phantomjs 进行网页整页截屏 hantomjs 是一个基于js的webkit内核无头浏览器 也就是没有显示界面的浏览器,这样访问网页就省去了浏览器的界面绘制所消耗的系统资源,比较适合用 ...

  3. iOS中的截屏（屏幕截屏及scrollView或tableView的全部截屏）

    iOS中的截屏(屏幕截屏及scrollView或tableView的全部截屏) 2017.03.16 12:18* 字数 52 阅读 563评论 4喜欢 2 1. 截取屏幕尺寸大小的图片并保存至相册 ...

  4. js实现第一次打开网页弹出指定窗口（常用功能封装很好用）

    js实现第一次打开网页弹出指定窗口(常用功能封装很好用) 一.总结 1.常用功能封装:之前封装的cookie的操作函数非常好用,我自己也可以这么搞 二.js实现第一次打开网页弹出指定窗口 练习1:第一 ...

  5. JS实现网页选取截屏 保存+打印 功能(转)

    源码地址: 1.1 确定截图选取范围 用户在开始截图后,需要在页面上选取一个截图范围,并且可以直观的看到,类似如下效果: image 我们的选取范围就是鼠标开始按下的那个点到鼠标拖动然后松开的那个点之 ...

  6. python3 利用正则获取网页中的想保存下来的内容

    需要获取某个网页中表格部分中某个产品的成份 分析在html中成份的元素代码 <a href="/composition/4c3060178d1184935a48c4e51be4f63f ...

  7. 用phantomjs 进行网页整页截屏

    写截取整个网页程序是一个做前台的哥们所托,要做一些漂亮的界面原形,参考一些不错的网站设计就帮他弄了个截屏的程序. phantomjs   是一个基于js的webkit内核无头浏览器 也就是没有显示界面 ...

  8. iOS 中捕获截屏操作

    转自:iOS知识小集 在iOS 7后,苹果提供了UIApplicationUserDidTakeScreenshotNotification通知来告诉App用户做了截屏操作.苹果的描述如下: // T ...

  9. 关于Unity中GrabPass截屏的使用和Shader的组织优化

    GrabPass截屏 可以用来截屏,截屏后把纹理传给下一个通道使用. 1:使用抓屏通道, GrabPass {} 或 GrabPass { “ 纹理名称”}; 使用GrabPass {}后,可以用_G ...

随机推荐

  1. linux下串口工具minicom

    系统环境:ubuntu  14 .04  和ubuntu 16.04 我当时的需要主要是两个,能够看到正常串口输出,并且把串口内容实时输出到文件中 那接下来工作主要是两个:1.安装 2.配置 相信各位 ...

  2. MVC几种找不到资源的解决方式

    在MVC中,controller中的Action和View中的.cshtml文件名称有一个对应的关系. 当不对应时,有以下几种情况发生: 一.找不到视图的错误 请求URL:http://localho ...

  3. Oracle命令（二）：Oracle数据库几种启动和关闭方式

    一.Oracle数据库几种启动方式 1.startup nomount 非安装启动,这种方式下启动可执行:重建控制文件.重建数据库,读取init.ora文件,启动instance,即启动SGA和后台进 ...

  4. 自己写的一个Solr搜索实例,增删改查+高亮+分页

    今天个人coding的模块测试,所以闲暇之余继续研究solr,然后顺带写了一个实例,随便搞的,solr真心不熟,期待认识热爱搜索的朋友,共同进步. 1.配置schema.xml文件[solr\coll ...

  5. 域名 ip地址 端口号

    域名默认指定一个ip地址 当用域名访问网站的时候 网站会默认给个端口号80 或者自己指定 其他的 例如数据库 也是会给端口号 例如mysql 3306 域名:80 是访问iis 网站域名:3306 是 ...

  6. MySQL -- Innodb是如何处理自增列的

    对于那些向带有自增列的表中插入行的语句,Innodb提供一种可配置的锁定机制,这种锁定机制可以显著提高SQL语句的可伸缩性和性能. Innodb中为了使用自增机制,自增列必须是索引的部份,从而可以使用 ...

  7. 传智播客c/c++公开课学习笔记--邮箱账户的破解与邮箱安全防控

    一.SMTP协议 SMTP(SimpleMail Transfer Protocol)即简单邮件传输协议. SMTP协议属于TCP/IP协议簇,通过SMTP协议所指定的server,就能够把E-mai ...

  8. T-SQL查询进阶--理解SQL Server中索引的概念，原理以及其他

    简介 在SQL Server中,索引是一种增强式的存在,这意味着,即使没有索引,SQL Server仍然可以实现应有的功能.但索引可以在大多数情况下大大提升查询性能,在OLAP中尤其明显.要完全理解索 ...

  9. 王勇详谈 Linux Deepin 背后的故事

    (Linux Deepin最近发布了12.12版本.其也许是国内第一款比较优秀的桌面Linux系统.在此向致力于研发国产OS系统的猿人们表示敬意.虽然Deepin只是基于Ubuntu在桌面应用和UI方 ...

  10. MIUI 们的发展蓝图：“罪恶”秘密背后的金钱和机遇

    (原文来自 AllThingsD)   听起来有点唬人,但是移动变革的确是这个时代最大的一次技术平台升级事件.这场趋势实在太浩大,不断地循环往复,对于创业者(还有像我这样的投资人来说),则意味着令人激 ...