Load an image from the clipboard

[GregTichbon]

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);
            }
        }
    }_

[Fengyuan Chen]

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.