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>
<p>
点击这个页面，然后按住 <kbd>CTRL</kbd> + <kbd>V</kbd>.图片就会被粘贴进去了
</p>
<canvas style="border:1px solid grey;" id="mycanvas"></canvas>
<script type="text/javascript">
//通过剪贴板获取图片的blob数据
function retrieveImageFromClipboardAsBlob(pasteEvent, callback){
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();
if(typeof(callback) == "function"){
callback(blob);
}
}
}
window.addEventListener("paste", function(e){
// Handle the event
retrieveImageFromClipboardAsBlob(e, function(imageBlob){
// If there's an image, display it in the canvas
if(imageBlob){
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext('2d');
// Create an image to render the blob on the canvas
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
canvas.width = this.width;
canvas.height = this.height;
// Draw the image
ctx.drawImage(img, 0, 0);
};
// 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(imageBlob);
}
});
}, false);
//听过剪贴板获取图片的base64格式数据
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);
</script>
</body>
</html>
网友回复
我知道答案，我要回答
私活外包
