JS复制图片到剪切板
之前项目中有遇到点击某按钮，直接复制页面中的图片二维码，一番搜索，获悉clipboard，但是无法复制图片，只能复制文本，遂只能将二维码图片下载下来使用,如今得知，web端也可以复制图片。
1. 使用getSelection + execCommand api复制图片
关于Selection和execCommand这两个api可以直接阅读大佬的这个 29.7 K 的剪贴板 JS 库有点东西！这篇文章.
- html
<img id="testImg" src="./img/test.jpg" alt="img">
<button id="btn">copy</button>
- js
const testImg = document.querySelector("#testImg");
const btn = document.querySelector("#btn");
function handleCopyImg() {
const selection = window.getSelection();
// 清除选中
if (selection.rangeCount > 0) selection.removeAllRanges();
// https://developer.mozilla.org/zh-CN/docs/Web/API/Document/queryCommandSupported
if(!document.queryCommandSupported('copy')) return alert('浏览器暂不支持复制命令');
// 创建range区域
const range = document.createRange();
range.selectNode(testImg);
selection.addRange(range);
document.execCommand("copy");
selection.removeAllRanges();
}
btn.addEventListener("click", handleCopyImg, false);
- 总结：
经过实际测验，发现点击按钮复制后，word文档、微信聊天输入框、QQ聊天输入框中都可以正常粘贴复制的图片，但在钉钉聊天输入框中进行粘贴没有任何反应。
2. navigator.clipboard实现复制图片
- clipboard api兼容情况，注意高版本浏览器支持，IE是完全不支持的
- html
<img id="testImg" src="./img/test.jpg" alt="img">
<button id="btn">copy</button>
- js
const testImg = document.querySelector("#testImg");
const btn = document.querySelector("#btn");
function handleCopyImg() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
canvas.width = testImg.width;
canvas.height = testImg.height;
img.crossOrigin = "Anonymous";
img.src = testImg.src;
img.onload = () => {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img, 0, 0);
// 将canvas转为blob
canvas.toBlob(async blob => {
console.log(blob);
const data = [
new ClipboardItem({
[blob.type]: blob,
}),
];
// https://w3c.github.io/clipboard-apis/#dom-clipboard-write
await navigator.clipboard.write(data)
.then(
() => {
console.log("Copied to clipboard successfully!");
},
() => {
console.error("Unable to write to clipboard.");
}
);
});
}
}
btn.addEventListener("click", handleCopyImg, false);
- 总结：
经过实际测验，在微信、QQ、钉钉聊天输入框均可以粘贴图片，唯一的缺点是低版本浏览器不支持。
3. 关于clipboard
- read方法返回一个Promise，可获取复制的内容
async function foo() {
const items = await navigator.clipboard.read();
const imageBlob = await items[0].getType("image/png");
console.log("imageBlob==>", imageBlob);
}
- readText方法返回一个Promise，获取复制的文本内容
async function foo() {
await navigator.clipboard.readText()
.then(data => {
console.log(data);
});
}
- write方法，写入剪切板内容，如图片或其它文件等
const data = [
new ClipboardItem({
"text/plain": new Blob(["hello clipboard"], { type: "text/plain" }),
}),
];
navigator.clipboard.write(data).then(
() => {
console.log("Copied to clipboard successfully!");
},
() => {
console.error("Unable to write to clipboard. :-(");
}
);
- writeText方法写入文本内容
navigator.clipboard.writeText("hello!!!");
