从浏览器获取图像(使用粘贴) [英] Get image (using paste) from the browser

问题描述

有两种方法可以通过浏览器复制图像(例如chrome)，即复制图像和图像的复制地址.

当我复制图像地址并使用粘贴图像"按钮将其粘贴时，可以从base64浏览器中复制图像.但是，当我复制图像时，我无法获得图像.如示例所示，有没有办法使用图像coipar获取图像?

示例复制图像-不起作用

我知道复制图像和复制图像的地址是不同的事情，但是我找不到使用复制图像时如何获取图像(blob或base64).

解决方案

您可以从粘贴

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

  img {高度:100vh;}  

 < div contenteditable>您可以在此处粘贴图像</div><图>< figcaption>复制此图像</figcaption>< img src ="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png"></figure>  

如果您需要在此类事件之外获取它，那么您将需要使用异步剪贴板API .
不幸的是，该API尚未得到很好的支持(当前仅闪烁)，但是无论如何，这是您可以使用此API读取图像文件的方式.

您首先需要请求/检查剪贴板读取" DataTransferItemsList (从技术上讲是一个数组)，从中仍然必须选择一个包含要访问的 .type 的代码.
在您的情况下，您仅知道它是一幅图像，但是有几种类型的图像可用，因此在进行此检查时需要确定它是哪一种.

  document.getElementById('btn').onclick = async(evt)=>{const auth = await navigator.permissions.query({name:"clipboard-read"});if(auth.state！=='拒绝'){const item_list =等待navigator.clipboard.read();让image_type;//我们稍后再提供const item = item_list.find(item =>//选择包含我们图像的一项item.types.some(type => {//此项目是否具有我们的类型if(type.startsWith('image/')){image_type =类型；//存储哪种图像类型返回true；}}));const文件=项目&&等待item.getType(image_type);console.log(file);}};  

  img {高度:100vh;}  

 < button id ="btn">读取剪贴板内容</button><图>< figcaption>复制此图像</figcaption>< img src ="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png"></figure>  

There are two ways to copy an image through the browser (for example chrome), the copy image and the copy address of the image.

When I copy the image address and paste it using my paste Image button, I can get the image copied from the base64 browser. But when I copy the image, I can't get the image. Is there a way to obtain the image using the image coipar, as shown in the examples?

Demo

code

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

Example copy image address - working

Example copy image - does not work

I know that copying the image and copying the image's address are different things, but I couldn't find out how I can get the image (blob or base64) when I use copy the image.

解决方案

You can access it from the paste ClipboardEvent's .clipboardData DataTransfer.

It will be in the .files FileList if available:

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>

If you need to get it outside of such an event, then you will need to use the asynchronous Clipboard API.
Unfortunately, this API is not yet very well supported (currently Blink only), but anyway, here is how you can read an image file using this API.

You first need to request / check for the "clipboard-read" Permission.
Then if the request has not be denied, you can try to read the whole content of the clipboard by calling navigator.clipboard.read(). This will return a DataTransferItemsList (technically an Array), from which you will still have to pick the one that holds the .type you want to access.
In your case you only know it's an image, but there are several types available for images, so you need to determine which one it is while doing this check.

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>

这篇关于从浏览器获取图像(使用粘贴)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！