I recently came across a small knowledge point during development. Here is a Base64 encoded image that I want to copy into the system pasteboard, how can I solve this?

For example, here is a picture.

404

I can convert to Base64 encoding by using the Base64 conversion tool at https://www.base64-image.de/ and the result is as follows.

base64

An image is something like data:image/png;base64,ivBor2… Such encoding.

Q: Now I have an image in this format, how can I copy it into the system pasteboard?

Solutions

First of all, a JavaScript library called clipboard-polyfill is needed here. The npm package address of this library is: https://www.npmjs.com/package/clipboard-polyfill.

There is a key part of the introduction to the Look Library.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import * as clipboard from "clipboard-polyfill";

async function handler() {
  console.log("Previous clipboard contents:", await clipboard.read());

  const item = new clipboard.ClipboardItem({
    "text/html": new Blob(
      ["<i>Markup</i> <b>text</b>. Paste me into a rich text editor."],
      { type: "text/html" }
    ),
    "text/plain": new Blob(
      ["Fallback markup text. Paste me into a rich text editor."],
      { type: "text/plain" }
    ),
  });
  await clipboard.write([item]);
}

window.addEventListener("DOMContentLoaded", function () {
  const button = document.createElement("button");
  button.textContent = "Copy";
  button.addEventListener("click", handler);
  document.body.appendChild(button);
});

Here you can create a ClipboardItem object, pass in the corresponding Blob content, and specify the corresponding content-type.

OK, here is the key part, that is how to convert Base64 encoded images to Blob.

In general, Base64 encoded images start with data:image/jpg;base64, followed by the Base64 real encoding.

Here is a method to convert Base64 encoding to Blob, with the following code.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

function b64toBlob(b64Data, contentType = null, sliceSize = null) {
  contentType = contentType || 'image/png'
  sliceSize = sliceSize || 512
  let byteCharacters = atob(b64Data)
  let byteArrays = []
  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    let slice = byteCharacters.slice(offset, offset + sliceSize)
    let byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i)
    }
    var byteArray = new Uint8Array(byteNumbers)
    byteArrays.push(byteArray)
  }
  return new Blob(byteArrays, {type: contentType})
}

Here it’s actually a matter of converting the Base64 encoding to Uint8Array, then converting it to Blob and specifying contentType.

Next, it’s easy to copy to the pasteboard, just call the top method to declare the ClipboardItem object.

1
2
3
4
5

function clip(b64Data) {
  const item = new clipboard.ClipboardItem({
    "image/png": this.b64toBlob(b64Data.replace('data:image/jpg;base64,', ''), 'image/png', 512)
  });
}

Here contentType is specified as image/png.

At this point, the clip method can copy the Base64 encoded image to the system pasteboard, which works on Windows and Mac.

Refrence https://cuiqingcai.com/30008.html