Paste an Image from Clipboard Using JavaScript

Get image (using paste) from the browser

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>

How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?

I spent some time experimenting with this. It seems to sort of follow the new Clipboard API spec. You can define a "paste" event handler and look at event.clipboardData.items, and call getAsFile() on them to get a Blob. Once you have a Blob, you can use FileReader on it to see what's in it. This is how you can get a data url for the stuff you just pasted in Chrome:

document.onpaste = function (event) {
    var items = (event.clipboardData || event.originalEvent.clipboardData).items;
    console.log(JSON.stringify(items)); // might give you mime types
    for (var index in items) {
        var item = items[index];
        if (item.kind === 'file') {
            var blob = item.getAsFile();
            var reader = new FileReader();
            reader.onload = function (event) {
                console.log(event.target.result); // data url!
            }; 
            reader.readAsDataURL(blob);
        }
    }
};

Once you have a data url you can display the image on the page. If you want to upload it instead, you could use readAsBinaryString, or you could put it into an XHR using FormData.

Edit: Note that the item is of type DataTransferItem. JSON.stringify might not work on the items list, but you should be able to get mime type when you loop over items.

Javascript - How to display a pasted clipboard image

You can just use this onPaste event, extracting the first file in clipboard:


    document.getElementById('input').onpaste = (e) => {
      const eventData = window.clipboardData || e.clipboardData ;
      const theFile = eventData.files[ 0 ];
    };

    <div id='input' style="max-height: 500px; max-height: 40px; border: solid black;" contenteditable></div><br>

    <img id="img" style="width: 100px; min-height: 100px; border: gray;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1004px-Google_%22G%22_Logo.svg.png">

In the example you can copy the logo and paste it in the div

How can I paste an image from the clipboard into a web form?

UPDATED 25/11/2014

As Alistar say you can't do this with only javascript and html, but wait, is not so simple, depending on what you need you can try different way!

..clipboard method only works to put strings on the clipboard. For other
types of data, such as URLs or images,
you will need to use a more complex
method...

HTML5

http://www.w3.org/TR/clipboard-apis/

http://www.w3.org/TR/clipboard-apis/#mandatory-data-types-1

http://caniuse.com/#feat=clipboard
https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent

Flex / Flash / ActionScript

Clipboard data formats

ActionScript 3.0 - Clipboard

http://www.flexets.com/show-image-from-clipboard
http://upog.wordpress.com/2010/02/14/copy-and-paste-in-flex-web-application/

JAVA

http://java.sun.com/j2se/1.5.0/docs/api/java/awt/datatransfer/Clipboard.html

http://www.java2s.com/Code/Java/2D-Graphics-GUI/SendingImageObjectsthroughtheClipboard.htm
http://lassebunk.dk/2009/08/04/clipboard-java-applet/
http://www.devdaily.com/java/java-clipboard-image-copy-paste

ActiveX

Clipboard ActiveX for Image Copy/Paste into Web Forms

JavaScript: copy text AND image to clipboard

You can do this by combining the execCommand and Range/Selection functionality:

let button = document.querySelector('#copy-button');

button.addEventListener('click', function () {
  let selection = window.getSelection();
  let container = document.querySelector('.container');

  if (selection.rangeCount > 0) {
    selection.removeAllRanges();
  }
  
  const range = document.createRange();
  range.selectNode(container);
  selection.addRange(range);
  document.execCommand("copy");
  selection.removeAllRanges();
});

.container {
  position: relative;
  text-align: center;
  color: white;
}

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<button id="copy-button">copy</button>
<div class="container">
  <img src="https://moview.nl/wp-content/uploads/2018/04/Mountain_RvB-3-bw.jpg" alt="Snow" style="width:100%;">
  <div class="bottom-left">Bottom Left</div>
  <div class="top-left">Top Left</div>
  <div class="top-right">Top Right</div>
  <div class="bottom-right">Bottom Right</div>
  <div class="centered">Centered</div>
</div>

Paste image from clipboard to html page

From the comments above, it sounds like you were trying to execute your bindings in the constructor of your component instead of within ngOnInit. This is a classic gotcha as the constructor spins up well before (in most cases) before the content on screen is finished rendering. ngOnInit is called as the component finalises its instantiation process.

https://angular-6ckpxd.stackblitz.io

The errors you receive are because typescript is strongly typed where javascript is not. You are pasting javascript code in (which is fine in most cases) but will need some casting to any if you want to eradicate most of them.

Paste image from clipboard javascript

It look that is impossible to paste an image from the clipboard. We ended up using via command line an external application like Minicap ( http://www.softpedia.com/get/Multimedia/Graphic/Graphic-Capture/MiniCap.shtml ).