本文主要是介绍一点知识丨Base64 的图片如何完美复制到系统粘贴板,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
“
阅读本文大概需要 1 分钟。
”问题
最近开发过程中遇到了一个小知识点,这里有一张 Base64 编码的图片,我想要把它复制到系统的粘贴板中,这个该怎么解决?
比如这里有一张图:
我可以通过 Base64 转换工具转换为 Base64 编码,转换网址为 https://www.base64-image.de/,转换结果如下:
图片就是类似 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 || 512let 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 的图片如何完美复制到系统粘贴板的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!