如何在Javascript中获得具有透明度的粘贴图像

Question

使用event.clipboardData检测粘贴的图像时，Alpha通道会丢失。显然这是因为Windows将图像作为24位位图存储在剪贴板中。

我听说有些应用程序会分别存储复制图像的透明度数据，但我无法确定是否可以通过clipboardData访问它。

这是我前一段时间写过的粘贴图像检测器：
http://12Me21.github.io/paste/

Answer 1

我实际上广泛研究了Windows剪贴板上的透明度主题，所以虽然我对javascript没有多少经验，但我可以帮助你实现这些原则。

剪贴板使用剪贴板类型的字符串ID系统，您可以同时在剪贴板上放置多个这样的类型。近年来，许多应用程序（包括MS Office和Gimp）已开始使用“PNG”类型用于透明图像，其中包含带有png图像字节的原始字节流。

然而，更常用的是DIB格式，它具有剪贴板ID“DeviceIndependentBitmap”，并且可能有问题。与PNG一样，它是一个原始字节流，但实际的文件格式有点混乱。有关DIB格式的详细信息，建议您通读MSDN上的this question and the answer I gave to it以及Device Independent Bitmap specs和BITMAPINFOHEADER struct。长话短说，它是一种32bpp的RGB格式，被滥用（有时候被误认为）ARGB。我不知道将DIB解析为Javascript中的可用图像是多么合理，但很多程序（包括谷歌浏览器）似乎只将它用作复制图像时放在剪贴板上的透明图像格式。 / p>

要完全支持透明粘贴，您可能需要同时支持PNG和DIB格式（并且考虑到围绕DIB的问题和争议，最好按此顺序）。 This answer可以提供有关筛选剪贴板和解析PNG和DIB图像的一般方法的更多信息，尽管它是C＃代码，而不是Javascript。

Answer 2

这是我发现的东西：

• 在我完成的所有测试中，粘贴像素会导致剪贴板中出现单个image / png斑点，因此您无能为力-它要么起作用，要么不起作用。

• 在paste事件navigator.clipboard.read和粘贴到contenteditable之间，行为是一致的。

• 在Windows上，透明性无可避免地命中和遗失，取决于数据的复制方式：

  • 来自Paint.NET：在Chromium和Firefox中都是不透明的。
  • 来自Krita：在Firefox中是透明的，在Chromium中是不透明的。
  • 来自Aseprite：在Chromium中是透明的，在Firefox中是不透明的。

  这可能是 ，原因是上述Windows剪贴板格式的噩梦。

• 透明性在Linux上非常有效-我已经测试了使用Firefox和Chromium从Krita，Aseprite和GIMP进行复制，一切都很好。

• Specification对于丢弃或不丢弃alpha通道一无所知，可能使它一般由实现定义。

一种解决方法是也为用户提供通过<input type="file" accept="image/*"/>和/或拖放事件（对于文件）提供其图像的方法，这两种方法都没有此问题（可能是由于传递了文件）就这样）。