Quiero pegar la imagen de mi portapapeles en el chat de whatsapp desde el portapapeles. Intenté usar el comando exec del documento con diferentes parámetros como insertHTML, insertImage, estos dos agregan una imagen en el contenido editable div pero no habilitan el botón de envío. También intenté usar el comando de ejecución del documento para pegar, pero no pegó nada. Verifiqué dos veces y las imágenes existen en el portapapeles.
async function sendToChat(blob) { setToClipboardImg(blob) try { document.querySelector('._6h3Ps ._13NKt').focus() } catch (e) { document.querySelector('textarea').focus() } // const data = [new ClipboardItem({ // [text.type]: text // })] // await navigator.clipboard.write(data) document.execCommand("Paste", null, null); //setToClipboardWithTextInsta() } var setToClipboardImg = async blob => { window.focus(); const data = [new ClipboardItem({ [blob.type]: blob })] await navigator.clipboard.write(data); }Necesitaba exactamente la misma funcionalidad, pude resolverlo usando html2canvas, puedes convertir un elemento html en una imagen y luego enviarlo a través de whatsapp desde el portapapeles, así es como lo implementé:
document.querySelector("#btn").onclick(function () { var table = document.querySelector("#table"); var elementContainer = document.querySelector("#previewImage"); try { // Prevent duplicates since the element will be appended to the container if (elementContainer.innerHTML) { elementContainer.innerHTML = ""; } html2canvas(table).then(canvas => { elementContainer.appendChild(canvas); canvas.toBlob(blob => navigator.clipboard.write([new ClipboardItem({'image/png': blob})])); alert('😁 The screenshot for the table currently displayed was copied to the clipboard, you can now paste into the WhatsApp chats 😁'); }); } catch(err){ document.querySelector("#output").innerHTML = err.message; } }Luego, en el encabezado del documento, agregue el siguiente cdn:
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>