In this post, we will learn how to paste an image from the clipboard with JavaScript using the Clipboard API, which is a modern and standardized way of accessing and manipulating the clipboard contents.

Pasting an image from the clipboard is a feature that allows users to copy and paste images from other sources, such as screenshots, web pages, or documents, into a web page using JavaScript. This feature can be useful for various purposes, such as uploading images, editing images, or sharing images. However, implementing this feature can be challenging, as different browsers have different ways of handling the clipboard data and the image elements.

1. What is the Clipboard API?

The Clipboard API is a set of methods and properties that enable us to interact with the system clipboard, which is a temporary storage area for data that can be copied and pasted between applications. The Clipboard API is supported by most modern browsers and allows us to:

  1. Get the data of the clipboard using event.clipboardData or navigator.clipboard.read().
  2. Set the data of the clipboard using event.clipboardData or navigator.clipboard.write().
  3. Listen to copy, cut, and paste events that are fired when the user performs clipboard operations using document.addEventListener('copy', handler), document.addEventListener('cut', handler), or document.addEventListener('paste', handler).
  4. Request permission to access the clipboard using navigator.permissions.query({name: 'clipboard-read'}) or navigator.permissions.query({name: 'clipboard-write'}).

The data of the clipboard can be in various formats, such as text, HTML, or images. The data can be accessed as a list of items, where each item has a type and a value. The type is a MIME type that indicates the format of the data, such as text/plain, text/html, or image/png. The value is a blob that contains the binary data of the item.

2. How to Paste an Image from the Clipboard?

To paste an image from the clipboard with Clipboard API, we need to follow these steps:

  1. Listen to the paste event that is fired when the user presses Ctrl+V or uses the context menu to paste an image from the clipboard.
  2. Get the data of the clipboard using event.clipboardData and check if it contains an image item.
  3. Get the blob of the image item using item.getAsFile() and read its contents using FileReader.readAsDataURL().
  4. Get an image element using document.getElementById('id') and set its source attribute to the data URL of the image blob.

Here is an example of how to implement these steps in JavaScript:

JS


HTML



Edit in JSFiddle

 
This code will paste any image from the clipboard into the image container. We can modify this code according to our needs and preferences. For example:

  1. We can use a different selector or method to append or replace the image element, such as document.getElementById(), document.querySelector(), element.appendChild(), or element.replaceChild().
  2. We can use a different attribute or property to set or get the source of the image element, such as img.setAttribute(‘src’, dataURL), img.getAttribute(‘src’), or img.src.
  3. We can use a different event or method to read the blob of the image, such as FileReader.readAsArrayBuffer(), FileReader.readAsBinaryString(), or FileReader.readAsText().
  4. We can use a different event or method to create or get the blob of the image, such as Blob(), URL.createObjectURL(), or navigator.clipboard.read().

That’s all about pasting an image from the clipboard with JavaScript.