Figma中的copy as PNG到底copy了个啥？

场景

UI扔过来一个Figma设计图，需要从上面扒一些图标作为PNG图片等。由于我不会怎样快速保存成图片（有会的兄弟评论区留言），所以就...copy as PNG。然后再粘贴出来另存为图片，就像这个样子：

同时我发现粘贴到微信输入框中是一个黑色的鬼样子：

于是我开始对粘贴板中到底粘贴了什么东西产生了好奇。

其实也是对富文本编辑器产生了好奇。

发现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Paste File</title>
    <style>
        #textareaBox {
            width: 500px;
            height: 500px;
            border: 1px solid skyblue;
        }
        #divBox {
            width: 500px;
            height: 500px;
            border: 1px solid lightgreen;
        }
    </style>
</head>
<body>
    <textarea id="textareaBox"></textarea>
    <div contenteditable="true" id="divBox"></div>
    <script>
        const textareaBox = document.querySelector("#textareaBox");
        const divBox = document.querySelector("#divBox");

        textareaBox.addEventListener("paste", (event) => {
            console.log(event.clipboardData.items[0].getAsFile());
            let paste = (event.clipboardData || window.clipboardData).getData("text");
            console.log("textareaBox:", paste);
        });
        divBox.addEventListener("paste", (event) => {
            console.log(event.clipboardData.items[0].getAsFile());
            let paste = (event.clipboardData || window.clipboardData).getData("text");
            console.log("divBox:", paste);
        });
    </script>
</body>
</html>

发现里面是个file类型的数据。

问题

所以为什么在div<contenteditable>可以完整粘贴显示出file文件，而在textare不行呢？是在DOM中浏览器执行渲染了吗？

Textarea和Div<contenteditable>有啥区别？（求助贴）

Figma中的copy as PNG到底copy了个啥？

场景

发现

问题