从浏览器获取图像（使用粘贴）

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

这是来自 this tutorial 的示例：首先为 "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);
    }
}

Answer 2

您可以从粘贴 ClipboardEvent's .clipboardData DataTransfer.

它将在 .files 文件列表中（如果可用）：

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" Permission。
然后如果请求没有被拒绝，你可以通过调用navigator.clipboard.read()尝试读取剪贴板的全部内容。这将 return 一个 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>

从浏览器获取图像（使用粘贴）

Get image (using paste) from the browser

javascript

clipboard

clipboarddata

typescript

angular