如何在document ready时自动触发Print Screen按键 无需用户操作实现截图

• 首先明确：纯前端（含jQuery）无法在document ready时静默触发系统Print Screen按键完成自动截图。
• 核心原因：浏览器的JavaScript运行在沙箱隔离环境中，没有权限操作系统级的硬件快捷键，该限制是浏览器为了保护用户隐私设置的，避免恶意页面未经授权窃取用户屏幕内容。

如果可以接受用户手动授权，可使用浏览器官方提供的屏幕捕获API实现截图，但该API必须由用户主动交互（例如点击按钮）触发，无法在页面加载完成后自动执行，示例代码如下：

$(document).ready(function() {
  // 注意：该接口必须由用户交互（如点击事件）触发，直接在ready里调用会被浏览器拦截
  $('#captureBtn').click(async function() {
    try {
      // 调用屏幕捕获接口，弹出授权提示
      const stream = await navigator.mediaDevices.getDisplayMedia({
        video: true
      });
      // 将捕获的流写入video元素
      const video = document.createElement('video');
      video.srcObject = stream;
      await video.play();
      // 绘制到canvas生成截图
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      canvas.getContext('2d').drawImage(video, 0, 0);
      // 停止捕获流释放资源
      stream.getTracks().forEach(track => track.stop());
      // 拿到base64格式的截图内容，可后续自行处理
      const screenshotBase64 = canvas.toDataURL('image/png');
    } catch (err) {
      console.log('截图被用户拒绝或发生错误', err);
    }
  })
})

如果你尝试在$(document).ready()的回调中直接调用屏幕捕获API，会被浏览器直接拦截并抛出权限错误，只有用户主动触发的交互事件回调中调用该接口，才会弹出授权提示，用户确认后才能完成截图。

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