如何在剪贴板中同时获取文本+图像

Question

我正在使用MS-WORD将内容复制到丰富的编辑器。 我需要使用从MS-WORD文件（通过CTRL + A）复制到编辑器中的文本+图像（通过CTRL + V）。

为了实现这一点，我正在使用此代码：

    function handlePaste (e) {
        var clipboardData, pastedData;

        // Stop data actually being pasted into div
        e.stopPropagation();
    e.preventDefault();

        // Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;

    pastedData = clipboardData.getData('Text');

    // Do whatever with pasteddata
    alert(pastedData);
}

document.getElementById('editableDiv').addEventListener('paste', handlePaste);

此代码的问题是我只从剪贴板中获取文本。 这是截图：

正如您所看到的，我只是从word文件而不是图像中复制文本。

是否有任何关于捕捉图像的解决方案以及剪贴板中的文字。

目前我正在使用Chrome来检查该功能。

这是同样的JSFiddle：

https://jsfiddle.net/swL8ftLs/247/

Answer 1

当用户复制/粘贴文本+图像时，clipboardData 中没有文件实体。文件实体仅在单个文件复制/粘贴时有效。

要解决此问题，我们需要：

• 读取 text/html 数据，并：
  • 在text/html中查找img元素并存储（例如，命名为htmlImages）
• 读取包含图像十六进制源的 text/rtf 数据，然后：
  • 通过匹配 \\pngblip 和 \\jpegblip 查找图像实体并将它们转换为 dataUrl 列表（例如，命名为 dataUrls）：
    • 获取图片类型
    • 获取十六进制源字符串
    • 将十六进制转换为 base64 字符串
    • 将图像类型和 base64 字符串组合成一个 dataurl 字符串
      • 您还可以实现其他处理程序将 base64 字符串转换为 blob 或将图像内容上传到云端
• 将 src 中元素的 htmlImages 属性替换为 dataUrls 中的值
  • 仅替换以“file:///”开头的 src