Copy and Paste Scanned Documents to and from the Clipboard

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.

Note

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

Clipboard API

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

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!");

Requirements

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

Web TWAIN Clipboard Demo

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

Here are the key parts.

Copy Scanned Documents to 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 Images to 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)
    }
}

Source Code

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