请问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
我知道答案，我要回答
私活外包
最新提问
如何破解绕开seedance2.0真人照片生成视频 限制？
python有哪些算法可以将视频中的每个帧图片去除指定区域水印合成新的视频？
iphone的激光雷达数据能否实时传输到three三维空间中？
豆包sora等ai视频生成大模型生成的视频水印如何去除？
python如何实现在电脑上拨号打电话给手机？
具身机器人与人形机器人区别？
nodejs如何将一个完整的js代码文件切割成不同的部分混淆后动态加载进入html运行？
为啥windows.onerror捕获js错误是这样的{"message":"Script error.","source":"","lineno":0,"colno":0,"stack":null,
2026年ai将全面接管编程？
WebMCP是干啥的？
