浏览器环境：谷歌浏览器
1.ctrl+v粘贴图片都是监听paste时间实现的，复制的数据都存在clipboardData下面，虽然打印显示数据长度为0，但是还是可以获取数据的
2.打印clipboardData.items发现是一个DataTransferItem。
3.DataTransferItem有个getAsFile()的方法，可以获取文件
???document.addEventListener(‘paste‘, function (event) { ???????console.log(event); ???????var isChrome = false; ???????if (event.clipboardData || event.originalEvent) { ???????????//某些chrome版本使用的是event.originalEvent ???????????var clipboardData = (event.clipboardData || event.originalEvent.clipboardData); ???????????if(clipboardData.items){ ???????????????// for chrome ???????????????var ?items = clipboardData.items, ???????????????????len = items.length, ???????????????????blob = null; ???????????????isChrome = true; ???????????????for (var i = 0; i < len; i++) { ???????????????????console.log(items[i]); ???????????????????if (items[i].type.indexOf("image") !== -1) { ???????????????????????//getAsFile() 此方法只是living standard firefox ie11 并不支持 ???????????????????????blob = items[i].getAsFile(); ???????????????????} ???????????????} ???????????} ???????} ???})此时就可以获取到blob对象了，这时候可以选择显示在页面上，也可以选择发送给后台
3.1显示图片
3.1.1执行下面代码即可,使用blob对象显示
?var blobUrl=URL.createObjectURL(blob); ??????document.getElementById("imgNode").src=blobUrl;效果图
3.1.2使用base64码显示，需要借助FileReader
reader.onload = function (event) { ???????????????????????// event.target.result 即为图片的Base64编码字符串 ???????????????????????var base64_str = event.target.result; ???????????????????????document.getElementById("imgNode").src=base64_str; ???????????????????} ???????????????????reader.readAsDataURL(blob);3.2上传到后台
3.2.1生成formData,这里生成formData，需要借助canvas
//借助canvas，生成formData ???????????????????var canvas = document.createElement(‘canvas‘); ???????????????????var dataURL = canvas.toDataURL(‘image/jpeg‘, 0.5); ???????????????????var fd = new FormData(document.forms[0]); ???????????????????fd.append("the_file", blob, ‘image.png‘); ???????????????????//创建XMLHttpRequest对象 ???????????????????var xhr = new XMLHttpRequest(); ???????????????????xhr.open(‘POST‘,‘/image‘ ); ???????????????????xhr.onload = function () { ???????????????????????if ( xhr.readyState === 4 ) { ???????????????????????????if ( xhr.status === 200 ) { ???????????????????????????????var data = JSON.parse( xhr.responseText ); ???????????????????????????????console.log(data); ???????????????????????????} else { ???????????????????????????????console.log( xhr.statusText ); ???????????????????????????} ???????????????????????}; ???????????????????}; ???????????????????xhr.onerror = function (e) { ???????????????????????console.log( xhr.statusText ); ???????????????????} ???????????????????xhr.send(fd);3.3完整代码
完整代码如下
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????body { ???????????display: -webkit-flex; ???????????display: flex; ???????????-webkit-justify-content: center; ???????????justify-content: center; ???????} ???</style></head><body><textarea></textarea><div contenteditable style="width: 300px;height: 100px; border:1px solid"> ???<img src="" id="imgNode"></div></body><script> ???document.addEventListener(‘paste‘, function (event) { ???????console.log(event); ???????var isChrome = false; ???????if (event.clipboardData || event.originalEvent) { ???????????//某些chrome版本使用的是event.originalEvent ???????????var clipboardData = (event.clipboardData || event.originalEvent.clipboardData); ???????????if(clipboardData.items){ ???????????????// for chrome ???????????????var ?items = clipboardData.items, ???????????????????len = items.length, ???????????????????blob = null; ???????????????isChrome = true; ???????????????for (var i = 0; i < len; i++) { ???????????????????console.log(items[i]); ???????????????????if (items[i].type.indexOf("image") !== -1) { ???????????????????????//getAsFile() 此方法只是living standard firefox ie11 并不支持 ???????????????????????blob = items[i].getAsFile(); ???????????????????} ???????????????} ???????????????if(blob!==null){ ???????????????????var blobUrl=URL.createObjectURL(blob); ???????????????????//blob对象显示 ???????????????????document.getElementById("imgNode").src=blobUrl; ???????????????????var reader = new FileReader(); ???????????????????//base64码显示 ??????????????????/* reader.onload = function (event) { ???????????????????????// event.target.result 即为图片的Base64编码字符串 ???????????????????????var base64_str = event.target.result; ???????????????????????document.getElementById("imgNode").src=base64_str; ???????????????????} ???????????????????reader.readAsDataURL(blob);*/ ???????????????????//借助canvas，生成formData ???????????????????var canvas = document.createElement(‘canvas‘); ???????????????????var dataURL = canvas.toDataURL(‘image/jpeg‘, 0.5); ???????????????????var fd = new FormData(document.forms[0]); ???????????????????fd.append("the_file", blob, ‘image.png‘); ???????????????????//创建XMLHttpRequest对象 ???????????????????var xhr = new XMLHttpRequest(); ???????????????????xhr.open(‘POST‘,‘/image‘ ); ???????????????????xhr.onload = function () { ???????????????????????if ( xhr.readyState === 4 ) { ???????????????????????????if ( xhr.status === 200 ) { ???????????????????????????????var data = JSON.parse( xhr.responseText ); ???????????????????????????????console.log(data); ???????????????????????????} else { ???????????????????????????????console.log( xhr.statusText ); ???????????????????????????} ???????????????????????}; ???????????????????}; ???????????????????xhr.onerror = function (e) { ???????????????????????console.log( xhr.statusText ); ???????????????????} ???????????????????xhr.send(fd); ???????????????} ???????????} ???????} ???})</script></html>js实现ctrl+v粘贴图片或是截图
原文地址：http://www.cnblogs.com/heihei-haha/p/7879611.html