Quiero convertir un div a lienzo y luego eventualmente a imagen. Así que estoy usando la biblioteca html2canvas. Intenté descargar la imagen, abrir la imagen en una nueva ventana y agregarla a un div, pero ninguno de ellos funcionó.
$(document).ready(function (e) { $("#final_download").click(function() { html2canvas($("#final_image_div")[0]).then(function (canvas) { console.log(canvas); var myImage = canvas.toDataURL("image/png"); // download the generated image downloadURI(myImage, "final_image.png"); // Open the image in a new window window.open(myImage , "_blank"); // display it in div $("#bottom").append(myImage); }); }); }); <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.3/html2canvas.min.js"></script> <div id="final_image_div">abcdef</div> <img src="images/download.jpg" id="final_download"> <div class="bottom"></div>¿Alguna idea de lo que estoy haciendo mal aquí?
Traté de ejecutar su código y solo faltaba una función dowloadURL (no existe tal cosa en Vanilla JS).
Simplemente agregué el siguiente código y luego todo funcionó como se esperaba:
function downloadURI(uri, name) { var link = document.createElement("a"); link.download = name; link.href = uri; link.click(); }FYI encontré esta función aquí