浏览器环境：谷歌浏览器
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>
时间： 2024-08-04 18:56:42