如何用JavaScript检测Print Screen后剪贴板中是否存在图片

以下是完整的功能实现代码，包含按键监听、剪贴板检测及结果输出逻辑：

// 剪贴板图片检测函数（修正原拼写错误并优化逻辑）
const checkHaveImageInClipboard = async () => {
    try {
        const clipboardItems = await window.navigator.clipboard.read();
        // 遍历所有剪贴板项，判断是否存在图片类型
        return clipboardItems.some(item => item.types.some(type => /image/.test(type)));
    } catch (err) {
        console.error('剪贴板读取失败:', err);
        return false;
    }
};

// 全局监听Print Screen按键
window.addEventListener('keydown', (event) => {
    // 匹配Print Screen按键（兼容不同浏览器的标识方式）
    const isPrintScreen = event.code === 'Print' || event.keyCode === 44;
    if (isPrintScreen) {
        // 延迟检测：截图后剪贴板内容需要短暂时间写入
        setTimeout(async () => {
            const hasImage = await checkHaveImageInClipboard();
            console.log(hasImage ? 'photo' : 'not photo');
        }, 500);
    }
});

关键说明 #

• 函数修正：修复了原函数的拼写错误（clipboar→clipboard），同时优化判断逻辑，遍历所有剪贴板项避免漏检单张图片以外的情况。
• 按键兼容性：同时使用event.code和event.keyCode判断Print Screen按键，覆盖不同浏览器的按键标识规则。
• 延迟处理：添加500ms延迟是因为系统完成截图并写入剪贴板需要短暂时间，直接检测可能得到不准确的结果，可根据实际场景调整延迟时长。
• 运行环境限制：navigator.clipboard API仅支持HTTPS协议或localhost本地环境，非安全环境下会触发权限错误，需确保运行环境符合要求。

内容的提问来源于stack exchange，提问作者VueFrontend