<!-- Background-Image -->
<div id="reference" style="display: inline-block; width: 20px; height: 20px;">
<div style="background-image: url(https://img.coregem.net/img/user/avatar/random/14.png?imageView2/1/w/200/h/200); opacity: 1; width: 20px; height: 20px; background-size: cover;"></div>
<!-- <img id="img" src="https://img.coregem.net/img/user/avatar/random/14.png?imageView2/1/w/200/h/200" width="100" height="100"> -->
</div>
<script type="text/javascript" src="../dist/html2canvas.min.js"></script>
<script type="text/javascript">
await html2canvas(reference, { scale: 4, allowTaint: true, useCORS:true }).then(function (canvas) {
document.body.appendChild(canvas);
});
</script>
<!-- This Img tag -->
<div id="reference" style="display: inline-block; width: 20px; height: 20px;">
<!-- <div style="background-image: url(https://img.coregem.net/img/user/avatar/random/14.png?imageView2/1/w/200/h/200); opacity: 1; width: 20px; height: 20px; background-size: cover;"></div> -->
<img id="img" src="https://img.coregem.net/img/user/avatar/random/14.png?imageView2/1/w/200/h/200" width="20" height="20">
</div>
<script type="text/javascript" src="../dist/html2canvas.min.js"></script>
<script type="text/javascript">
html2canvas(reference, { scale: 4, allowTaint: true, useCORS:true }).then(function (canvas) {
document.body.appendChild(canvas);
});
</script>