Chrome更新致JS读取剪贴板图片功能失效问题求助

核心问题分析 #

Chrome/Edge近期更新后，复制网页图片时，剪贴板中的DataTransferItem顺序发生了变化：文本类型（如图片对应的HTML片段）会被放在第一个位置，而真正的图片文件项排在后面。你的原代码仅检查第一个item，因此无法识别到图片。

修改后的代码实现 #

window.addEventListener('paste', pasteEvent => {
    let targetFile = null;

    // 遍历所有DataTransferItem，查找图片类型的file项
    if (pasteEvent.clipboardData && pasteEvent.clipboardData.items) {
        for (const item of pasteEvent.clipboardData.items) {
            if (item.type.startsWith('image/') && item.kind === 'file') {
                targetFile = item.getAsFile();
                break;
            }
        }
    }

    // 如果items里没找到，尝试直接从files集合获取（部分场景下files会直接包含图片）
    if (!targetFile && pasteEvent.clipboardData && pasteEvent.clipboardData.files.length > 0) {
        targetFile = Array.from(pasteEvent.clipboardData.files).find(file => file.type.startsWith('image/'));
    }

    if (targetFile) {
        // 重命名文件（保留原有逻辑）
        const blob = targetFile.slice(0, targetFile.size, targetFile.type);
        const newFile = new File([blob], `clipboardPaste_${Date.now()}`, { type: targetFile.type });
        addFiles([newFile]);
        
        pasteEvent.preventDefault();
    }
});

关键改进点 #

• 遍历所有items：不再局限于第一个item，确保能找到隐藏在后面的图片file项
• 兼容files集合：部分场景下clipboardData.files会直接包含图片文件，作为备选查找路径
• 更严谨的类型判断：使用startsWith('image/')替代indexOf("image") === 0，语义更清晰且避免潜在的匹配问题
• 合理的默认行为阻止：仅在成功识别到图片后才阻止默认粘贴，避免影响其他合法的粘贴操作

额外排查建议 #

如果上述方案仍有问题，可以在事件回调中打印剪贴板的所有内容，进一步定位问题：

console.log('Clipboard items:', pasteEvent.clipboardData.items);
console.log('Clipboard files:', pasteEvent.clipboardData.files);

通过查看输出，可以明确Chrome当前放置图片项的位置和类型，针对性调整判断逻辑。

内容的提问来源于stack exchange，提问作者Luca P.