Tengo un requisito bastante sencillo de implementar: un botón en una página web que copiará un bloque de texto con una imagen en el portapapeles.
Sé cómo copiar texto y sé cómo copiar una imagen. Por lo que puedo decir, no puedo hacer ambas cosas. ¿Me estoy perdiendo algo o de hecho no es posible con JavaScript? ¿Alguien puede pensar en alguna solución alternativa (yo diría que Flash fue en 1995 :-)).
Muchas gracias
Puede hacer esto combinando la execCommand y Range/Selection :
let button = document.querySelector('#copy-button'); button.addEventListener('click', function () { let selection = window.getSelection(); let container = document.querySelector('.container'); if (selection.rangeCount > 0) { selection.removeAllRanges(); } const range = document.createRange(); range.selectNode(container); selection.addRange(range); document.execCommand("copy"); selection.removeAllRanges(); }); .container { position: relative; text-align: center; color: white; } .bottom-left { position: absolute; bottom: 8px; left: 16px; } .top-left { position: absolute; top: 8px; left: 16px; } .top-right { position: absolute; top: 8px; right: 16px; } .bottom-right { position: absolute; bottom: 8px; right: 16px; } .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } <button id="copy-button">copy</button> <div class="container"> <img src="https://moview.nl/wp-content/uploads/2018/04/Mountain_RvB-3-bw.jpg" alt="Snow" style="width:100%;"> <div class="bottom-left">Bottom Left</div> <div class="top-left">Top Left</div> <div class="top-right">Top Right</div> <div class="bottom-right">Bottom Right</div> <div class="centered">Centered</div> </div>