Получить изображение (используя вставку) из браузера

Question

Существует два способа копирования изображения через браузер (например, chrome), копирование изображения и адрес копирования изображения.

Когда я копирую адрес изображения и вставляю его, используя мой Вставьте кнопку Изображение, я могу получить изображение, скопированное из браузера base64. Но когда я копирую изображение, я не могу получить изображение. Есть ли способ получить изображение, используя изображение coipar, как показано в примерах?

Демо

код

  clickPaste() {
    let self = this;
    (navigator as any).clipboard.readText().then(clipboard => self.clip = clipboard);
console.log(self.clip) // copy image adress ---> base64
  }

Пример копирования изображения адреса - рабочий

Пример Копировать изображение - не работает

Я знаю, что копирование Изображение и копирование адреса изображения - это разные вещи, но я не мог понять, как получить изображение (blob или base64), когда использую копию изображения.

Answer 1

Вы можете получить к нему доступ из paste ClipboardEvent * .clipboardData DataTransfer .

Это будет в .files FileList, если доступно:

document.onpaste = (evt) => {
  const dT = evt.clipboardData || window.clipboardData;
  const file = dT.files[ 0 ];
  console.log( file );
};

img{ height: 100vh; }

<div contenteditable>You can paste the image here</div>
<figure>
  <figcaption>Copy this image</figcaption>
  <img src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png">
</figure>

Если вам нужно получить его вне такого события, вам нужно будет использовать асинхронный Clipboard API .
К сожалению, этот API еще не очень хорошо поддерживается (в настоящее время только Blink), но в любом случае, вот как вы можете прочитать файл изображения, используя этот API.

Сначала вам нужно запросить / проверить "clipboard-read" Разрешение .
Затем, если запрос не был отклонен, вы можете попытаться прочитать все содержимое буфера обмена, вызвав navigator.clipboard.read(). Это вернет DataTransferItemsList (технически массив), из которого вам все равно придется выбрать тот, который содержит .type, к которому вы хотите получить доступ.
В вашем случае вы знаете только, что это изображение , но для изображений доступно несколько типов, поэтому вам нужно определить, какой из них используется при выполнении этой проверки.

document.getElementById('btn').onclick = async (evt) => {
  const auth = await navigator.permissions.query( { name: "clipboard-read" } );
  if( auth.state !== 'denied' ) {
    const item_list = await navigator.clipboard.read();
    let image_type; // we will feed this later
    const item = item_list.find( item => // choose the one item holding our image
      item.types.some( type => { // does this item have our type
        if( type.startsWith( 'image/' ) ) {
          image_type = type; // store which kind of image type it is
          return true;
        }
      } )
    );
    const file = item && await item.getType( image_type );
    console.log( file );
  }
};

img{ height: 100vh; }

<button id="btn">read clipboard content</button>
<figure>
  <figcaption>Copy this image</figcaption>
  <img src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png">
</figure>

Answer 2

Это пример из этого урока : Сначала вы добавляете прослушиватель событий для "paste":

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......
            window.open(imageDataBase64);
        }
    });
}, false);

И с помощью этой функции вы можете получить изображение как base64:

**
 * This handler retrieves the images from the clipboard as a base64 string and returns it in a callback.
 * 
 * @param pasteEvent 
 * @param callback 
 */
function retrieveImageFromClipboardAsBase64(pasteEvent, callback, imageFormat){
    if(pasteEvent.clipboardData == false){
        if(typeof(callback) == "function"){
            callback(undefined);
        }
    };

    // retrive elements from clipboard
    var items = pasteEvent.clipboardData.items;

    if(items == undefined){
        if(typeof(callback) == "function"){
            callback(undefined);
        }
    };
    // loop the elements
    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);
    }
}