Load an image from the clipboard
GregTichbon opened this issue · comments
Would it be possible to load an image from the clipboard?
I have looked at the code for uploading a new image found in https://fengyuanchen.github.io/cropperjs/js/main.js (see below) and tried to adapt this with little success.
_// Import image
var inputImage = document.getElementById('inputImage');
if (URL) {
inputImage.onchange = function () {
var files = this.files;
var file;
if (cropper && files && files.length) {
file = files[0];
if (/^image\/\w+/.test(file.type)) {
uploadedImageType = file.type;
uploadedImageName = file.name;
if (uploadedImageURL) {
URL.revokeObjectURL(uploadedImageURL);
}
image.src = uploadedImageURL = URL.createObjectURL(file);
cropper.destroy();
cropper = new Cropper(image, options);
inputImage.value = null;
} else {
window.alert('Please choose an image file.');
}
}
};
} else {
inputImage.disabled = true;
inputImage.parentNode.className += ' disabled';
}_
I have tried to utilise the following code
_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);
/**
* This handler retrieves the images from the clipboard as a blob and returns it in a callback.
*
* @param pasteEvent
* @param callback
*/
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);
}
}
}_
I think it is possible if you can read the Blob data (or Data URL or an image URL) from the Clipboard. Just try it.