Estoy usando la forma más simple de esta biblioteca que pude encontrar:
html2canvas(document.body).then(canvas => { const base64Image = canvas.toDataURL('image/jpeg', 1); try { localStorage.setItem("img1", base64Image); } catch (e) { console.log("Storage failed: " + e); } }); return false;Con el último lanzamiento:
https://github.com/niklasvh/html2canvas/releasesPero la consola devuelve:
#1 0ms Starting document clone with size 1440x502 scrolled to 0,-998.5 html2canvas.js:7674:35 #1 91ms Document cloned, element located at 0,0 with size 1460x1522 using computed rendering html2canvas.js:7674:35 #1 92ms Starting DOM parsing html2canvas.js:7674:35 #1 99ms Added image html2canvas.js:7674:35 #1 107ms Added image file:///Users/juliustolksdorf/Projects/app_circles_webapp/img/img_calender.png html2canvas.js:7674:35 #1 108ms Added image file:///Users/juliustolksdorf/Projects/app_circles_webapp/img/img_clock.png html2canvas.js:7674:35 #1 110ms Added image file:///Users/juliustolksdorf/Projects/app_circles_webapp/img/img_marker.png html2canvas.js:7674:35 #1 116ms Added image data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAYAAADL1t+KAAAgAElEQVR4nO2bwXLtOg4D/f8/ndlkN1VPzoXbDcpCFXcRCYCgzyrXdV0/u9UKyftm3mn/Vt0kb0uznYVW3tTbO7B6N+/D2vXqfQr7TsDSCTxeZNCaeaf9W3WTvC3NdhZaeVNv78Dq3bwPa9er9ynsOwFLJ/B4kUFr5p32b9VN8rY021lo5U29vQOrd/ html2canvas.js:7674:35 #1 117ms Starting renderer for element at 0,0 with size 1460x1522 html2canvas.js:7674:35 #1 123ms Canvas renderer initialized (1460x1522) with scale 2 html2canvas.js:7674:35 #1 147ms Error loading image html2canvas.js:7725:35 #1 150ms Finished rendering html2canvas.js:7674:35 Uncaught (in promise) DOMException: The operation is insecure. Entonces parece que la conexión entre las bibliotecas funciona pero falla en Error loading image html2canvas.js:7725:35
¿Alguna idea de por qué?
Pude arreglarlo y también descargar el contenido así:
html2canvas(document.querySelector("#qrKIK")).then(canvas => { //document.body.appendChild(canvas) var base64image = canvas.toDataURL("image/png"); //window.open(base64image , "_blank"); download("data:image/png;"+base64image, "qr-code-event" + eventName+".png", "image/png");});