看到一个站点的输入框，支持屏幕截图功能，觉得有点意思，所以代码是挑选出来分享的。

不幸的是，目前，只有高版本的Chrome浏览器支持这种直接粘贴。到目前为止，其他浏览器无法粘贴（IE11还没有测试过）。当然，这种增强的用户体验功能总比没有好。

输入框的结构代码：
复制代码代码如下所示：



绑定输入框的粘贴事件：

复制代码代码如下所示：
无功输入= document.getelementbyid（'testinput）；

Input.addEventListener（'paste功能（事件）{
/ /做…
}）；


粘贴事件的事件接口的对象提供了一个clipboarddata接口，从而节省了在系统剪贴板数据。如上所述，只有高版本的Chrome浏览器目前可以直接访问系统剪贴板的数据。

截图是由QQ的截图，或者对prtscn键截图，截图功能或通过其他第三方软件提供。
复制代码代码如下所示：
Input.addEventListener（'paste功能（事件）{
在事件对象接口中添加到剪贴板访问系统
无功clipboarddata = event.clipboarddata，
我= 0，
项目、项目、类型；

如果（clipboarddata）{
项目= clipboarddata.items；

如果（！项目）{
返回；
}

项目=项目{ 0 }；
存储在剪贴板中的数据类型
类型= clipboarddata.types | | { }；

为（；；i < types.length；i++）{
如果（类型{我} = 'files）{
项目=项目{ }；
打破；
}
}

以确定图片数据
如果（项目item.kind = 'file' item.type.match（ / ^图像 / /我））{
/读取图片
ImgReader（项）；
}
}
}）；


从剪贴板将图像数据，你可以用有读它。

复制代码代码如下所示：
无功imgreader =功能（项目）{
var文件= item.getasfile（），
读者= FileReader（）；

在Web页面上显示/读取文件之后
reader.onload =功能（e）{
VaR img =新的图像（）；

img.src = e.target.result；
document.body.appendchild（IMG）；
}；

读取文件
reader.readasdataurl（文件）；
}；



一个非常短的代码实现，下面的源代码可以用来查看演示。

复制代码代码如下所示：





使用clipboarddata实现在Web页面的截图和粘贴功能

#箱{宽度：200px；高度：200px；border: 1px solid # DDD；}




使用clipboarddata实现在Web页面的截图和粘贴功能




（函数（）{（））
无功imgreader =功能（项目）{
VaR blob = item.getasfile（），
读者= FileReader（）；

reader.onload =功能（e）{
VaR img =新的图像（）；

img.src = e.target.result；
document.body.appendchild（IMG）；
}；

reader.readasdataurl（BLOB）；
}；

document.getelementbyid（'testinput）。AddEventListener（'paste功能（e）{）
无功clipboarddata = e.clipboarddata，
我= 0，
项目、项目、类型；

如果（clipboarddata）{
项目= clipboarddata.items；

如果（！项目）{
返回；
}

项目=项目{ 0 }；
类型= clipboarddata.types | | { }；

为（；；i < types.length；i++）{
如果（类型{我} = 'files）{
项目=项目{ }；
打破；
}
}

如果（项目item.kind = 'file' item.type.match（ / ^图像 / /我））{
ImgReader（项）；
}
}
}）；
}）；