When downloading the image the Google QR Code API is blank. When I use different image instead of the Google QR Code API it is included.
'''
<!-- div to be generated -->
<div id="qrid">
<h1>Sample ID</h1>
<img src="https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=http%3A%2F%2Fwww.google.com%2F&choe=UTF-8">
</div>
<button onclick="downloadDiv('qrid')">Print as Image</button>
<!-- import jquery and html2canvas -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="html2canvas.js"></script>
<script src="html2canvas.min.js"></script>
<script type="text/javascript">
function downloadDiv(divid) {
html2canvas(document.getElementById(divid)).then(function (canvas) {
$("#previewImg").append(canvas);
var anchorTag = document.createElement("a");
document.body.appendChild(anchorTag);
// document.getElementById(divid+"2").appendChild(canvas);
anchorTag.download = "Visitor_"+divid+".png";
anchorTag.href = canvas.toDataURL();
anchorTag.target = '_blank';
anchorTag.click();
});
}
</script>
'''
You should enable the options allowTain As follow and make sur that the Access-Control-Allow-Origin header is enable for your site
function downloadDiv(divid) {
html2canvas(document.getElementById(divid), {allowTaint : true}).then(function (canvas) {
$("#previewImg").append(canvas);
var anchorTag = document.createElement("a");
document.body.appendChild(anchorTag);
// document.getElementById(divid+"2").appendChild(canvas);
anchorTag.download = "Visitor_"+divid+".png";
anchorTag.href = canvas.toDataURL();
anchorTag.target = '_blank';
anchorTag.click();
});
}