问题
最近开发过程中遇到了一个小知识点，这里有一张 Base64 编码的图片，我想要把它复制到系统的粘贴板中，这个该怎么解决？
比如这里有一张图：
我可以通过 Base64 转换工具转换为 Base64 编码，转换网址为 https://www.base64-image.de/，转换结果如下：
图片就是类似 data:image/png;base64,ivBor2... 这样的编码。
问：现在有一张这样格式的图片，怎么把它复制到系统粘贴板中？
解决方案
首先这里需要用到一个 JavaScript 库，叫做 clipboard-polyfill，这个库的 npm 包地址为： https://www.npmjs.com/package/clipboard-polyfill，
看库的介绍有个关键的部分：
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);
});
|
这里可以创建一个 ClipboardItem 对象，并传入对应的 Blob 内容，同时指定对应的 content-type 即可。
OK，那这里就需要一个关键部分，那就是如何把 Base64 编码的图片转化为 Blob。
一般来说，Base64 编码的图片的开头是 data:image/jpg;base64,，后面跟的就是 Base64 真实编码。
这里提供一个方法，可以将 Base64 编码转化为 Blob，代码如下：
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})
}
|
这里其实就是将 Base64 编码先转化为了 Uint8Array，然后再将其转化为 Blob，并指定 contentType 即可。
接下来复制到粘贴板就很简单了，调用最上面的方法声明 ClipboardItem 对象即可：
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)
});
}
|
这里 contentType 指定为了 image/png。
至此，clip 方法传入 Base64 编码的图片即可复制到系统粘贴板了，亲测可以在 Windows、Mac 上生效。
文章来源: cuiqingcai.com，作者：崔庆才，版权归原作者所有，如需转载，请联系作者。
原文链接：cuiqingcai.com/30008.html
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
评论（0）