如何从粘贴事件获取剪贴板截图尺寸（无需DOM渲染img标签）

实现方案 #

核心逻辑 #

通过内存中的Image对象结合FileReader能力，读取剪贴板图片数据获取宽高，再计算缩放比例适配容器，全程无需将img标签插入DOM。

具体代码实现 #

1. 监听剪贴板粘贴事件

document.addEventListener('paste', async (e) => {
  const items = e.clipboardData?.items;
  if (!items) return;
  
  for (const item of items) {
    if (item.type.startsWith('image')) {
      const file = item.getAsFile();
      if (file) await processScreenshot(file);
      break;
    }
  }
});

2. 内存中读取图片并计算适配尺寸

async function processScreenshot(file) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      // 创建内存中的Image对象，无需插入DOM
      const img = new Image();
      img.onload = () => {
        // 获取原始截图宽高
        const originalW = img.width;
        const originalH = img.height;
        
        // 计算适配600px容器的缩放比例
        const maxWidth = 600;
        let scale = 1;
        if (originalW > maxWidth) {
          scale = maxWidth / originalW;
        }
        
        // 适配后的尺寸，保证不超出容器且无滚动条
        const targetW = originalW * scale;
        const targetH = originalH * scale;
        
        // 这里可根据需求处理适配后的图片（如绘制到Canvas导出）
        console.log('适配后尺寸：', targetW, targetH);
        resolve({ width: targetW, height: targetH });
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  });
}

适配说明 #

• 以600px容器宽度为上限，若截图原始宽度超过600px，按宽度等比缩放高度，保证图片比例不变
• 若原始宽度小于等于600px，直接使用原始尺寸，容器不会出现水平/垂直滚动条
• 全程使用内存中的Image对象，无需在DOM中渲染任何可见的img标签

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