My code to print an image using html2canvas is working on all browsers except Chrome. It even works on Chrome incognito mode but not in the normal Chrome browser. Also for new users not using the print feature, it seems to be working on their normal Chrome browsers but older users using the feature are suddenly seeing a blank page. Is it some kind of cache issue? After debugging I found that the canvas generated by html2canvas is capturing image of wrong dimension even when the entire DOM is loaded for my component. here is my piece of code :
html2canvas(inputEl, {useCORS: true, allowTaint: false}).then(canvas => {
const [canvasHeight , canvasWidth] = [canvas.height, canvas.width];
const imgData = canvas.toDataURL("image/png");
let canvasImage = new Image();
canvasImage.onload = onCanvasLoad.bind(this, canvasImage, {...canvasOptions, pdfDocument, canvasHeight, canvasWidth});
canvasImage.src = imgData;
});
Settings CORs to true is also didn't help.
Even the example on the main site is not working - checked with https://html2canvas.hertzen.com/ -> bottom right corner - photo - capture.
The question also posted here - https://github.com/niklasvh/html2canvas/issues/2804
Please provide some pointers here.
Specifications:
The issue been resolved. Please follow the same thread - Click here
Adding the following changes helped me solve the issue:
function fnIgnoreElements(el) {
if (typeof el.shadowRoot == 'object' && el.shadowRoot !== null)
return true
}
html2canvas(document.querySelector("#capture"), { ignoreElements:
fnIgnoreElements }).then(canvas => {
document.body.appendChild(canvas)
});