复制到剪贴板的透明 PNG 图像呈现黑色背景

Question

我在 Web 应用程序中遇到 JavaScript 函数问题。该函数将 PNG 图像（在 Django 后端使用 LaTeX 和 Matplotlib 渲染）复制到剪贴板。下载后，图像将保持预期的透明度。但是，当使用 JavaScript 复制到剪贴板时，透明背景会变成黑色。

这是负责复制图像的 JavaScript 代码的简化版本：

document.getElementById('copyButton').addEventListener('click', function() {
    var imgElement = document.getElementById('renderedImage');
    if (imgElement) {
        var canvas = document.createElement('canvas');
        canvas.width = imgElement.naturalWidth;
        canvas.height = imgElement.naturalHeight;
        var ctx = canvas.getContext('2d');
        ctx.globalCompositeOperation = 'copy';
        ctx.drawImage(imgElement, 0, 0);
        canvas.toBlob(function(blob) {
            var clipboardItem = new ClipboardItem({'image/png': blob});
            navigator.clipboard.write([clipboardItem]);
        }, 'image/png');
    }
});

该问题似乎发生在多个浏览器上。我怀疑这可能与画布或剪贴板 API 处理图像数据的方式有关，尤其是透明度。然而，在 Firefox 上，这实际上似乎完全不受支持。

任何人都可以提供有关如何在将 PNG 图像复制到剪贴板时保持其透明度的见解或解决方案吗？我不介意使用完全不同的方法。

我尝试过的：
检查并确认原始图像具有透明度。 将

globalCompositeOperation

设置为“复制”以保留透明度。 在多个浏览器中进行了测试（Chrome 和 Edge 中仍然存在问题，而 Firefox 尚不支持 ClipboardItem）。

我所期待的： 当用户将图像复制到剪贴板时，我希望保留透明度，就像下载图像时一样。

问题： 使用剪贴板 API 时，如何确保保留复制图像的透明度？是否有特定的方法或解决方法来防止剪贴板中的透明背景变黑？

Answer 1

已解决

这根本不是我的“点击复制”功能的问题，而是我粘贴到的应用程序的问题。我粘贴到的应用程序不会存储数据以提高透明度。然而，通过复制并粘贴到支持透明度的应用程序和程序中，该功能可以正常工作（例如在 Chrome 上）。