Summernote 复制图像

Question

我在任何地方都没有找到任何相关信息。如何将选定的图像复制到剪贴板？我创建了一个自定义 js，它向图像的弹出窗口添加了一个按钮，效果很好，但我被困在这里：

$.extend($.summernote.plugins, {
        'imageCopy': function (context) {
            var self = this;
            var ui = $.summernote.ui,
            $editable = context.layoutInfo.editable,
            options = context.options,
            $editor = context.layoutInfo.editor,
            lang = options.langInfo,
            $note = context.layoutInfo.note;

            context.memo('button.imageCopy', function () {
                var button = ui.button({
                    contents: options.imageCopy.icon,
                    container: false,
                    tooltip: lang.imageCopy.tooltip,
                    click: function () {
                        var img = $($editable.data('target'));
                        console.log('copy image=' + img);
                    }
                });
                return button.render();
            });
        }
    });

所以我真的不知道如何从当前选定的图像中获取数据并将其放入剪贴板。

Answer 1

该片段不使用按钮，但展示了如何使用剪贴板 API。只需点击图片即可。

它将在 iframe 上被阻止。错误消息指的是 https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-permissions-in-cross-origin-iframes，这取决于此处片段允许的标志。

同时键入“image/jpeg” returns 错误，而“image/png” 有效。

img.onclick = ({ target }) => {
  fetch(target.src)
  .then(function(response) {
    return response.blob()
  })
  .then(function(blob) {
    navigator.clipboard.write( [new ClipboardItem({ [blob.type]: blob })]).then(
        function () {
          console.log("Yay");
        },
        function (error) {
          console.error(error);
        }
    );
  });
};

<img id="img" src="https://i.imgur.com/I6N0hf2.png" style="height: 100px;">

Answer 2

刚刚提到了 Summernote 文档和其他东西。我的理解是它提供了 restoreTarget 属性来获取所选图像的参考。您可以通过它获取图像的来源并使用剪贴板将其复制到剪贴板 API.

Here 是我试过的代码。

Summernote 复制图像

Summernote copy image

javascript

summernote