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

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

Here 是我尝试过的代码。

Answer 2

sn-p 不使用按钮，而是显示如何使用剪贴板 API。只需点击图片即可。

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

同时键入“image/jpeg”会在“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;">