I am using the simplest form of this library I could find:
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;
With the newest release:
https://github.com/niklasvh/html2canvas/releases
But console returns:
#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.
So it looks like the connection between the libraries is working but fails at Error loading image html2canvas.js:7725:35
Any idea why?
I was able to fix it and also download the content like so:
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");
});