No he encontrado nada sobre esto en ningún lado. ¿Cómo puedo copiar una imagen seleccionada en el portapapeles? Creé un js personalizado que agrega un botón a la ventana emergente de la imagen que funciona bien, pero estoy atascado aquí:
$.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(); }); } });Entonces, realmente no sé cómo puedo obtener los datos de la imagen seleccionada actualmente y ponerlos en el portapapeles.
Acabo de referir documentos de Summernote y otras cosas. lo que entendí es que proporciona el atributo restoreTarget para obtener la referencia de la imagen seleccionada. Puede obtener la fuente de la imagen a través de eso y copiarla en el portapapeles usando la API del Portapapeles.
Aquí está el código que he probado.
El fragmento no usa un botón, pero muestra cómo usar la API del Portapapeles. Simplemente haga clic en la imagen.
Se bloqueará en iframes. El mensaje de error se refiere a https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-permissions-in-cross-origin-iframes que depende de las banderas permitidas para los fragmentos aquí.
También escriba "image/jpeg" devuelve un error mientras que "image/png" funciona.
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;">