使用Paste API处理图片后体积从3.6MB变为23MB的原因咨询

这个问题我之前也踩过坑，核心差异在于剪贴板存储图片的方式和直接读取本地文件完全不同，咱们结合你的代码和场景拆解下：

首先先看你贴的两段代码：

粘贴API处理的代码 #

document.addEventListener('paste', function (event) { 
  var items = event.clipboardData && event.clipboardData.items; 
  var file = null; 
  if (items && items.length) { 
    // 检索剪切板items 
    for (var i = 0; i < items.length; i++) { 
      if (items[i].type.indexOf('image') !== -1) { 
        file = items[i].getAsFile(); 
        break; 
      } 
    } 
  } 
  console.error(file.size); // 23m 
  // 此时file就是剪切板中的图片文件 
});

Input文件选择的代码 #

document.getElementsByTagName('input')[0].addEventListener('change', function(e) { 
  const file = e.target.files[0]; 
  console.log(file.size); // 3.6m 
})

接下来讲关键原因：

• 剪贴板的图片格式转换：
  当你复制本地的JPG/WEBP这类压缩格式图片时，操作系统的剪贴板通常会存储两个版本：一个是原压缩文件，另一个是无压缩的位图版本（比如PNG格式）。而粘贴API默认获取的往往是这个无压缩的位图——毕竟位图能保证图片显示的清晰度，适合直接粘贴到文档、编辑器里，但代价就是体积暴增（你的3.6MB JPG转成无压缩PNG后变成23MB完全合理）。
  但通过input选择文件时，浏览器直接读取的是磁盘上的原压缩文件，自然体积不会变。

• 不同来源的剪贴板内容差异：
  如果是从截图工具（比如Windows自带截图、Mac的Cmd+Shift+4）复制的图片，本身就是无压缩的位图，粘贴后体积大是正常的；但如果是从浏览器右键复制图片，部分浏览器会保留原格式，但大部分情况下系统还是会转成无压缩格式存储到剪贴板。

• 快速验证方法：
  你可以在两段代码里分别打印file.type，粘贴的文件大概率是image/png，而input读取的是image/jpeg，格式变化就是体积暴涨的直接原因。

解决思路（可选） #

如果需要让粘贴的图片保持原体积，有两个方向：

1. 遍历剪贴板items时，优先查找原格式的文件（有些系统会保留image/jpeg类型的item）；
2. 将粘贴得到的位图通过Canvas重新压缩成JPG/WEBP格式，再转换成File对象使用。

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