Image attributes are not rendered in html2canvas

I am using html2canvas JavaScript library to render html element as image format (png),the html elements are being rendered , all of the html elements are rendered except image elements with url , can please someone help with this , my main issue here is that the html elements are rendered but the images are not rendering.

This feature is essential for a project I am working on , so if please anyone could help me.

HTML Code :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<style>
  * {
  box-sizing: border-box;
  
}

.column {
  float: left;
  width: 13%;
  padding: 5px;
  

}
.row{
    background-color: aqua;
    width: auto;
}
/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
</style>
<div id="html-content-holder">
    <div class="row" id="row">
        <div class="column">
            <img src="https://related2.upprewards.com/Content/Images/StampsPng/bbq01.png" alt="bbq" width="20%">
        </div>
        <div class="column">
            <img src="https://related2.upprewards.com/Content/Images/StampsPng/coffee01.png" alt="coffee" width="20%">
        </div>
        <div class="column">
            <img src="https://related2.upprewards.com/Content/Images/StampsPng/lobster01.png" alt="lobster" width="20%">
        </div>
        <div class="column">
            <img src="https://related2.upprewards.com/Content/Images/StampsPng/lobster01.png" alt="lobster" width="20%">
        </div>
        <div class="column">
            <img src="https://related2.upprewards.com/Content/Images/StampsPng/lobster01.png" alt="lobster" width="20%">
        </div>
        <div class="column">
            <img src="https://related2.upprewards.com/Content/Images/StampsPng/coffee01.png" alt="coffee" width="20%">
        </div>
    </div>
</div>
<br>
<br>
<input download="download.png" id="btn-Preview-Image" type="button" value="Download" />
<a id="button" href="#">Download</a>
<br />
<h3>Preview :</h3>
<div id="preview">
</div>
<script>
    
    $(document).ready(function () {
        var element = document.querySelector("#html-content-holder"); // global variable
        var getCanvas; // global variable
        var newData;

        $("#btn-Preview-Image").on('click', function () {
            html2canvas(element, {
                onrendered: function (canvas) {
                    getCanvas = canvas;
                    let downloadLink = document.createElement('a');
                    downloadLink.setAttribute('download', 'image.png');
                    var imgageData = getCanvas.toDataURL("image/png");
                    let url = imgageData.replace(/^data:image\/png/, 'data:application/octet-stream');
                    downloadLink.setAttribute('href', url);
                    downloadLink.click(); //Downloaded file
                }
            });
        });
    });
</script>

Image attributes are not rendered in html2canvas

0 Answers