How to Copy and Paste Scanned Document Images Using the JavaScript Clipboard API

The Clipboard API allows web applications to read and write the clipboard’s contents, which makes it convenient to paste scanned documents to other applications like Word, email clients and load images from the clipboard in a Dynamic Web TWAIN (DWT) application.

Here is a demo video of copying scanned documents to the email editing area:

We are going to have a brief review of the API and implement a basic demo.

What you’ll build: A web application that copies scanned document images to the system clipboard and pastes clipboard images into a Dynamic Web TWAIN viewer using the JavaScript Clipboard API.

Key Takeaways

  • The JavaScript Clipboard API lets web apps read and write images programmatically, enabling copy-paste workflows for scanned documents.
  • Dynamic Web TWAIN’s ConvertToBlob and LoadImageFromBinary methods provide the bridge between the scanner buffer and the clipboard.
  • The Clipboard API requires HTTPS or localhost and only supports PNG for image read/write operations.
  • This integration is useful for pasting scanned pages directly into email composers, Word documents, or other web applications.

Common Developer Questions

  • How do I copy a scanned document image to the clipboard using JavaScript?
  • How do I paste an image from the clipboard into a Dynamic Web TWAIN web application?
  • Why does the JavaScript Clipboard API only work on HTTPS pages?

Prerequisites

Built-in Clipboard Support in Dynamic Web TWAIN

The Dynamic Web TWAIN now has the clipboard functions built-in:

Understand the JavaScript Clipboard API

The Clipboard API is still in draft status. You can check out more details here: https://github.com/w3c/clipboard-apis.

Key Clipboard API Methods

  1. read()

    The read() method can read the content in the clipboard as blob. It can read plain text, images and rich content like HTML.

    Code to read text in the clipboard:

     const items = await navigator.clipboard.read();
 const textBlob = await items[0].getType("text/plain");
 const text = await (new Response(textBlob)).text();

    Code to read the image in the clipboard:

     const items = await navigator.clipboard.read();
 const blob = await items[0].getType("image/png");

  2. readText()

    This method is designed to read text in the clipboard with a simpler usage.

     navigator.clipboard.readText().then(function(data) {
   console.log("Your string: ", data);
 });

  3. write()

    The write() method can write content like text, images to the clipboard.

     var data = [new ClipboardItem({ "text/plain": new Blob(["Text data"], { type: "text/plain" }) })];
 navigator.clipboard.write(data).then(function() {
   console.log("Copied to clipboard successfully!");
 }, function() {
   console.error("Unable to write to clipboard. :-(");
 });

  4. writeText()

    This method is designed to write text to the clipboard with a simpler usage.

     await navigator.clipboard.writeText("Howdy, partner!");

Browser Requirements and Security Constraints

The Clipboard API is supported by modern browsers. You can check out the supported browsers list here.

Due to security concerns, the Clipboard API only works on pages served over HTTPS or localhost.

In addition, users will be asked to grant permission if it wants to have access to the clipboard.

Permission

Build a Web TWAIN Clipboard Integration

Let’s try to integrate the Clipboard API into a web TWAIN application.

Here are the key parts.

Copy Scanned Documents to the System Clipboard

We need to use DWT’s ConvertToBlob method to convert images to blob and write the blob to the clipboard. Images are stored in PNG format. Other formats may not work.

function CopySelected(){
    if (DWObject) {
        DWObject.ConvertToBlob(
            CurrentImageIndexInBuffer	,
            Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
            function(result) {
                CopyBlobToClipboard(result);
            },
            onFailure);
    }
}

function CopyBlobToClipboard(blob) {
    var data = [new ClipboardItem({ "image/png": blob})];
    navigator.clipboard.write(data).then(function() {
      console.log("Copied to clipboard successfully!");
    }, function() {
      console.error("Unable to write to clipboard. :-(");
    });
}

Paste Clipboard Images into Web TWAIN

Read the image blob in the clipboard and load it to DWT using the LoadImageFromBinary method.

async function ReadImageFromClipboard(){
    const items = await navigator.clipboard.read();
    const blob = await items[0].getType("image/png");
    loadFileFromBinary(blob);
}

function loadFileFromBinary(blob) {
    if (DWObject) {
        DWObject.LoadImageFromBinary(blob, onSuccess, onFailure)
    }
}

Common Issues and Edge Cases

  • Clipboard write only supports PNG format. Attempting to write JPEG or other image formats to the clipboard with the Clipboard API will fail silently or throw an error. Always convert images to PNG using Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG before calling navigator.clipboard.write().
  • Permission denied errors in non-secure contexts. The Clipboard API is blocked on pages not served over HTTPS or localhost. If you see a DOMException: Document is not focused or permission error, ensure the page is served securely and that the user has granted clipboard access.
  • items[0].getType("image/png") throws when no image is present. If the clipboard contains only text or is empty, calling getType("image/png") will throw a NotFoundError. Wrap clipboard reads in a try-catch and check items[0].types before accessing a specific MIME type.

Source Code

You can see the entire HTML file here: https://github.com/xulihang/dynamsoft-samples/blob/main/dwt/clipboard.html