<!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>
<div id="box">
<img src="" alt="" id="img">
</div>
<script type="text/javascript">
window.addEventListener('paste', function (e) {
var items;
if (e.clipboardData && e.clipboardData.items) {
items = e.clipboardData.items;
if (items) {
items = Array.prototype.filter.call(items, function (element) {
return element.type.indexOf("image") >= 0;
});
Array.prototype.forEach.call(items, function (item) {
var blob = item.getAsFile();
var reader = new FileReader();
reader.onloadend = function (event) {
var imgBase64 = event.target.result; // event.target.result.split(",") [0]=data:image/png;base64 [1]=data
console.log(imgBase64); // base64
var dataURI = imgBase64;
img.src=dataURI
var blob = dataURItoBlob(dataURI); // blob
console.log(blob);
uploadImg(blob);
};
reader.readAsDataURL(blob);
});
}
}
});
/**
* base64 to blob二进制
*/
function dataURItoBlob(dataURI) {
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // mime类型
var byteString = atob(dataURI.split(',')[1]); //base64 解码
var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
var intArray = new Uint8Array(arrayBuffer); //创建视图
for (var i = 0; i < byteString.length; i++) {
intArray[i] = byteString.charCodeAt(i);
}
return new Blob([intArray], {type: mimeString});
}
/**
* 上传图片 FormData
*/
function uploadImg(file) {
console.log(file)
var formData = new FormData();
// formData.append('my-image-file', file);
// formData.append('username', 'myfile'); // 添加自定义数据
formData.append('ext','png')
// formdata.append('group', 'public')
formData.append('uploadfile', file)
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.baidu.com');//上传的路径
xhr.send(formData)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText).result.url)
var res = JSON.parse(xhr.responseText).result.url
}
}
}
</script>
</body>
</html>
网友评论