开源是程序员的基本美德
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>首先去复制一个图片，来这里粘贴一下</h2>
<img id="pasteimg" src="">
<hr>
<input type="button" value="base64转blob" onclick="GetCheckBlob()" />
<hr>
<img id="CheckBlobimg" src="">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
//将粘贴事件绑定到 document 上
document.addEventListener("paste", function(e) {
var cbd = e.clipboardData;
var ua = window.navigator.userAgent;
// 如果是 Safari 直接 return
if (!(e.clipboardData && e.clipboardData.items)) {
return;
}
// Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
if (cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind ===
"file" &&
cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] ===
"Files" &&
ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49) {
return;
}
var item = cbd.items[0]; //直接取第一个对象
if (item.kind != undefined && item.kind == "file") {
var blob = item.getAsFile();
if (blob.size === 0) {
return;
}
//TODO 此处可以上传
//转换成base64显示
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function(event) {
//div中的img标签src属性赋值，可以直接展示图片
$("#pasteimg").attr("src", this.result);
}
}
}, false);
//Base64转blob
function dataURItoBlob(base64Data) {
var byteString;
if (base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);
else
byteString = unescape(base64Data.split(',')[1]);
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {
type: mimeString
});
}
//按钮事件
function GetCheckBlob() {
var basestr = $("#pasteimg").attr("src");
console.log("获取base64");
var blob = dataURItoBlob(basestr);
console.log("转换blob");
//TODO 此处可以上传
var reader = new FileReader();
reader.readAsDataURL(blob);
console.log("读取blob再显示出来");
reader.onload = function(event) {
$("#CheckBlobimg").attr("src", this.result);
}
}
</script>
</body>
</html>运行之后就是下面这种样子
利用qq或者微信，去随便截取一张图片，到网页里面来粘贴一下，按Ctrl+V
上传的话，可以利用按钮事件中演示的，base64转成blob类型，或者直接上传base64。
川公网安备 51010702003150号
留下您的脚步
最近评论