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

 代码如下 复制代码

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>利用 clipboardData 在网页中实现截屏粘贴的功能</title>
<style type="text/css">
#box{ width:200px; height:200px; border:1px solid #ddd; }
</style>
</head>
<body>
 
<h1>利用 clipboardData 在网页中实现截屏粘贴的功能</h1>  
<hr />
<div><input type="text" id="testInput" placeholder="截屏后粘贴到输入框中" size="30" /></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;
            document.body.appendChild( img );
        };
       
        reader.readAsDataURL( blob );
    };

    document.getElementById( 'testInput' ).addEventListener( 'paste', function( e ){
    var clipboardData = e.clipboardData,
        i = 0,
        items, item, types;
       
    if( clipboardData ){
        items = clipboardData.items;
       
        if( !items ){
            return;
        }
       
        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 );
        }
    }
    });
})(); 
</script>
   
</body>
</html>

时间: 2024-12-27 13:29:14

clipboardData 在网页中实现截屏粘贴的功能的相关文章

javascript在网页中实现读取剪贴板粘贴截图功能_javascript技巧

见某网站的输入框支持截屏粘贴的功能,觉得有点意思,于是将代码扒出来分享下. 可惜,目前仅有高版本的 Chrome 浏览器支持这样直接粘贴,其他浏览器目前为止还无法粘贴( IE11没测试过 ),当然这种增强型的用户体验功能有总比没有好. 输入框的结构代码: 复制代码 代码如下: <input type="text" id="testInput" /> 为输入框绑定粘贴事件: 复制代码 代码如下: var input = document.getElemen

在网页中实现“截屏”上传图片功能

对于web来说,用户提到这个需求,我们起初的想法可能都是:除非开发嵌入式控件,不然根本无法实现.   不过随着webkit等内核的浏览器兴起,我们完全可以借助W3C的一些API,和一些变通的方式实现这个功能.   今天就讲讲如何在web页面中实现"截屏"并且上传.   这里"截屏"之所以要打引号,是因为确实无法实现"截屏",但是我们可以通过变通方式实现,比如客户短聊天软件,QQ,旺旺等,这些软件截屏之后,数据都会在"剪切板"中

js利用clipboardData实现截屏粘贴功能_javascript技巧

本文实例为大家分享了clipboardData截屏粘贴实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>copyimg</title> <style type="text/css"> #box{ width:200px; height:20

怎样在wps文字中添加截屏

  在wps文字中添加截屏的方法: 打开我们需要插入的wps文档备用 在打开的wps文档上方找到"插入"并点击 点击插入之后在出现的菜单栏上寻找"截屏"并点击 点击截屏之后会出现两个选项,然后选择"屏幕截图",点击之后选择截图,然后点击下面那个小对勾即可插入 如果不想屏幕截图上有当前文档,那么可以选择第二个"截屏时隐藏当前窗口" 点击之后重复第四部即可

如何在网页中加入运行脚本代码的功能

如何在网页中加入运行脚本代码的功能  以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

javaweb-如何在网站中实现视屏分享的功能

问题描述 如何在网站中实现视屏分享的功能 是java web方面的,如把视屏分享到人人网等,其相关的SDK等.具体任务上级没描述清楚,只说了那么一句....求解啊

使Flash在网页中实现全屏显示

网页|显示 我们在制作网页的时候经常希望使我们制作的FLASH实现在网页中全部显示,也就是说网页中除了FLASH以外再不显示其他内容,首先给大家做了个演示页面,大家可以看看效果. 其实这个效果很简单的,主要是利用Flash的发布功能和CSS技术实现. 具体制作过程: 1.启动我们的Flash MX 2004,并且打开一个已经存在的源文件. 2.选择"文件"菜单,从中选择"发布设置",在出现的对话框中选择"HTML"选项卡,然后按如下图形式进行设置

魅族mx6截屏有新功能吗 魅族mx6截屏方法教程

1. 既然是安卓手机我们只要按下键盘的"开机键"+"音量-键",这样就可以成功的截图了. 2.截图的图片我们只要点击通知栏上的小图图片即可看到刚才截屏的照片了. 3.点击图片就可以直接查看图片了,. 4.如果想发给好友点击"分享按钮"即可. 5.截图的照片保存在手机的MX6--photo--screenshots.里面都是你刚才截屏的图片.

网站设计参考:使用截屏的网站设计实例

文章描述:23个在网页中使用截屏的实例. 无论你是在开发app或者网站,以截屏的方式告诉潜在的客户他们将得到的结果是个很不错的主意.而且如果你的产品看起来足够漂亮,你可能只是想要将其放在前面和中间,让它们成为页面的焦点. 为了给你提供点儿灵感,我们收集了一些这样做的网站.在这些例子中,你将会注意到这些截屏中的很多--就算不是全部--都被包围在他们可能出现在的某个浏览器(mac版safari最常见)或者设备之中.这有助于添加些语境,然后也是兴趣的另一个层面. 其实最近国内的网站也越来越多的见到这种