一点知识丨Base64 的图片如何完美复制到系统粘贴板

阅读本文大概需要 1 分钟。


问题

最近开发过程中遇到了一个小知识点,这里有一张 Base64 编码的图片,我想要把它复制到系统的粘贴板中,这个该怎么解决?

比如这里有一张图:

一点知识丨Base64 的图片如何完美复制到系统粘贴板
404

我可以通过 Base64 转换工具转换为 Base64 编码,转换网址为 https://www.base64-image.de/,转换结果如下:

一点知识丨Base64 的图片如何完美复制到系统粘贴板

图片就是类似 data:image/png;base64,ivBor2... 这样的编码。

问:现在有一张这样格式的图片,怎么把它复制到系统粘贴板中?

解决方案

首先这里需要用到一个 JavaScript 库,叫做 clipboard-polyfill,这个库的 npm 包地址为:https://www.npmjs.com/package/clipboard-polyfill,

看库的介绍有个关键的部分:

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);
});

这里可以创建一个 ClipboardItem 对象,并传入对应的 Blob 内容,同时指定对应的 content-type 即可。

OK,那这里就需要一个关键部分,那就是如何把 Base64 编码的图片转化为 Blob。

一般来说,Base64 编码的图片的开头是 data:image/jpg;base64,,后面跟的就是 Base64 真实编码。

这里提供一个方法,可以将 Base64 编码转化为 Blob,代码如下:

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})
}

这里其实就是将 Base64 编码先转化为了 Uint8Array,然后再将其转化为 Blob,并指定 contentType 即可。

接下来复制到粘贴板就很简单了,调用最上面的方法声明 ClipboardItem 对象即可:

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

这里 contentType 指定为了 image/png

至此,clip 方法传入 Base64 编码的图片即可复制到系统粘贴板了,亲测可以在 Windows、Mac 上生效。

作者:崔庆才
排版:崔庆才




崔庆才丨静觅

隐形字

同名公众号「崔庆才丨静觅」


在这里分享自己的一些经验、想法和见解。


一点知识丨Base64 的图片如何完美复制到系统粘贴板
一点知识丨Base64 的图片如何完美复制到系统粘贴板
一点知识丨Base64 的图片如何完美复制到系统粘贴板

长按识别二维码关注




好文和朋友一起看~

原文始发于微信公众号(进击的Coder):一点知识丨Base64 的图片如何完美复制到系统粘贴板

链接:https://bbbe.top/archives/3422.html
来源:随风的博客
文章版权归作者所有,未经允许请勿转载。
本网站使用者因为违反本声明的规定而触犯中华人民共和国法律的,一切后果自己负责,本网站不承担任何责任。
本声明未涉及的问题参见国家有关法律法规,当本声明与国家法律法规冲突时,以国家法律法规为准。
本文仅供学习参考,请勿用于违法用途。 若根据文章内容操作遭受任何损失,请自行承担责任。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>