剪贴板 API 读取图片进阶
如何从剪贴板中读取图片数据并显示?如何将 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降级。