JS复制图片到剪切板

2023-07-29 01:37| 来源: 网络整理| 查看: 265

JS复制图片到剪切板

之前项目中有遇到点击某按钮，直接复制页面中的图片二维码，一番搜索，获悉clipboard，但是无法复制图片，只能复制文本，遂只能将二维码图片下载下来使用,如今得知，web端也可以复制图片。

1. 使用getSelection + execCommand api复制图片

关于Selection和execCommand这两个api可以直接阅读大佬的这个 29.7 K 的剪贴板 JS 库有点东西！这篇文章.

html copy 复制代码 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 copy 复制代码 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!!!"); 复制代码 4. 参考资料 clipboardAsync Clipboard API：异步剪贴板 APIClipboard API JavaScript 网页端复制图片到剪切板这个 29.7 K 的剪贴板 JS 库有点东西！

【本文地址】

JS复制图片到剪切板

JS复制图片到剪切板

今日新闻

推荐新闻