来自 Mozilla Firefox 和 MS Edge 的剪贴板时，Alpha 变为黑色

Posted 2023-03-06

【中文标题】来自 Mozilla Firefox 和 MS Edge 的剪贴板时，Alpha 变为黑色

【英文标题】：Alpha becomes black when coming from clipboard on Mozilla Firefox and MS Edge

【发布时间】：2017-09-22 22:08:25

【问题描述】：

我正在使用代码from here 将剪贴板中的图像粘贴到页面上。它适用于所有浏览器（Chrome、Firefox、Edge 和 Opera）。

问题是：当图像是带有 alpha 通道（透明区域）的 PNG 或 GIF 时，alpha 在 Firefox 和 Edge 中变为黑色。

这里是代码 sn-p (or jsfiddle if you prefer)：

document.getElementById('pasteArea').onpaste = function (event) 
  // use event.originalEvent.clipboard for newer chrome versions
  var items = (event.clipboardData  || event.originalEvent.clipboardData).items;
  console.log(JSON.stringify(items)); // will give you the mime types
  // find pasted image among pasted items
  var blob = null;
  for (var i = 0; i < items.length; i++) 
    if (items[i].type.indexOf("image") === 0) 
      blob = items[i].getAsFile();
    
  
  // load image if there is a pasted image
  if (blob !== null) 
    var reader = new FileReader();
    reader.onload = function(event) 
      console.log(event.target.result); // data url!
      document.getElementById("pastedImage").src = event.target.result;
    ;
    reader.readAsDataURL(blob);
  

body 
background-color: skyblue;

<textarea id="pasteArea" placeholder="Paste Image Here"></textarea><br>
<img id="pastedImage">

这是我在下一个演示中使用的源图像：

这就是 Chrome/Opera 中发生的情况（良好的输出）：

这是 Firefox/Edge 中发生的情况（输出错误）：

我还在 Adob​​e Illustrator 和 Corel Draw 等其他软件中看到了这种不良行为（粘贴时出现黑色 alpha），您需要“打开”或“放置/导入”文件而不是“粘贴”以避免黑色 alpha .

系统信息：Windows 10（周年更新）32bits； Chrome 58.0.3029.81、Opera 44.0、Firefox 53.0、Microsoft Edge 38.14393.0.0

我的问题是：如何避免在 Mozilla Firefox/MS Edge 的网页中粘贴图像上出现黑色 alpha？

【问题讨论】：

我不知道它依赖什么，但我无法在两台装有 Firefox/53.0 的不同 Windows 10 x64 计算机上重现它——但它确实发生在 Edge/38.14393.1066.0 中。 Edge 中生成的图像小 2 KB。

附加信息：我使用的是 Windows 10 32 位； Chrome 58.0.3029.81、Opera 44.0、Firefox 53.0、Microsoft Edge 38.14393.0.0

Alpha 已在 items[i].getAsFile() 丢失。我怀疑这与剪贴板可能以多种格式存储数据有关。我手头没有剪贴板查看器，但是当我将图片粘贴到文字处理器中时，我得到了三种不同的选择，其中一种缺少 alpha 通道。不知道大家在使用这个API的时候能不能选择。

非常有趣@ÁlvaroGonzález 感谢您提供的信息；顺便说一句，我的一个 64 位系统的朋友在 Firefox 上得到了相同的黑色 alpha 输出。

【参考方案1】：

您将无法自己解决此问题。您的用户可以避免这种情况的唯一方法是上传或下载图像，而不是使用剪贴板来导入或导出它们。