0

I have made a div with three images(all from external server) and I am trying to save these images as a png image.However when I do this, only the div background and not the images appear on the generated png by the html2canvas library. Is it some sort of limitation of this library or is there something wrong with my code. I'd appreciate some help :)

<div id="savediv">
        <img  src="http://lorempixel.com/400/200" id="one" alt="no image" width="300" height="100">
        <br/>
        <img  src="http://lorempixel.com/400/200/sports" id="two" alt="no image" width="300" height="200">
        <br/>
        <img  src="http://lorempixel.com/400/200/sports/1/Dummy-Text" id="three" alt="no image" width="300" height="200"> 
    </div>

    <br/><br/>

    <input type="button" id="imgsaver" value="save as img">
    </input>

And this is the javascript :

 <script type="text/javascript">
        $('#imgsaver').click(function() {
                html2canvas($('#savediv')[0], {
                            width: 1000,
                            height: 1000
                }).then(function(canvas) {
                var a = document.createElement('a');
                a.href = canvas.toDataURL("image/png");
                a.download = 'myfile.png';
                a.click();
        });
});

    </script>

I haven't used a CDN and used the html2canvas.min.js .

Anchal S.
  • 1
  • 1
  • Is not a limitation of the library, is a security limitation of canvas, you can find out more about it from [HERE](https://stackoverflow.com/questions/2390232/why-does-canvas-todataurl-throw-a-security-exception) – Titus Jul 15 '18 at 11:01
  • @Titus Oh I see, is there a way of getting around it? – Anchal S. Jul 15 '18 at 11:16

0 Answers0