CodeWalk

剪贴板 API 读取图片进阶

作者:孤独的心 · 2026-05-30 12:55

如何从剪贴板中读取图片数据并显示?如何将 Canvas 内容复制到剪贴板?如何处理浏览器兼容性问题?ClipboardEvent 与 Clipboard API 的关系?

回答

孤独的心

读取图片: const items = await navigator.clipboard.read(); for(const item of items){ if(item.types.includes('image/png')){ const blob = await item.getType('image/png'); img.src = URL.createObjectURL(blob) } }。写入 Canvas: canvas.toBlob(async blob=>{await navigator.clipboard.write([new ClipboardItem({'image/png':blob})])})。ClipboardEvent: document.addEventListener('paste', e=>{const items=e.clipboardData.items})。推荐 Clipboard API。兼容: Safari read()需手势;Firefox不支持read()图片;try/catch降级。