请问js如何获取剪贴板中的图片base64数据？
网友回复
js代码如下：
function retrieveImageFromClipboardAsBase64(pasteEvent, callback, imageFormat){
if(pasteEvent.clipboardData == false){
if(typeof(callback) == "function"){
callback(undefined);
}
};
var items = pasteEvent.clipboardData.items;
if(items == undefined){
if(typeof(callback) == "function"){
callback(undefined);
}
};
for (var i = 0; i < items.length; i++) {
// Skip content if not image
if (items[i].type.indexOf("image") == -1) continue;
// Retrieve image on clipboard as blob
var blob = items[i].getAsFile();
// Create an abstract canvas and get context
var mycanvas = document.createElement("canvas");
var ctx = mycanvas.getContext('2d');
// Create an image
var img = new Image();
// Once the image loads, render the img on the canvas
img.onload = function(){
// Update dimensions of the canvas with the dimensions of the image
mycanvas.width = this.width;
mycanvas.height = this.height;
// Draw the image
ctx.drawImage(img, 0, 0);
// Execute callback with the base64 URI of the image
if(typeof(callback) == "function"){
callback(mycanvas.toDataURL(
(imageFormat || "image/png")
));
}
};
// Crossbrowser support for URL
var URLObj = window.URL || window.webkitURL;
// Creates a DOMString containing a URL representing the object given in the parameter
// namely the original Blob
img.src = URLObj.createObjectURL(blob);
}
}
window.addEventListener("paste", function(e){
// Handle the event
retrieveImageFromClipboardAsBase64(e, function(imageDataBase64){
// If there's an image, open it in the browser as a new window :)
if(imageDataBase64){
// data:image/png;base64,iVBORw0KGgoAAAAN......
console.log(imageDataBase64);
}
});
}, false);
完整的html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
...点击查看剩余70%
by thinkfuture
我知道答案，我要回答
私活外包
最新提问
有没有开源的项目将图片视频声音文字转场特效编排自动生成剪映草稿json文件？
有没有摄像头捕获眼球转动操作鼠标的开源代码？
localstorage如何生成自增的键值对进行增删改查？
python有没有将python脚本与python运行环境一键打包成exe的代码？
nodejs如何执行浏览器中运行的js代码？
iframe中如何阻止其他域名网页的打开或跳转？
webrtc如何实现多人音频电话会议？
如何实现uni.connectSocket兼容web与小程序app端的websocket通讯？
webrtc如何浏览器中实现多人群音视频通话会议？
indexdb中的表结构与数据如何导出导入恢复？
