How to generate "screenshot" of html div with external images?
<p>I have a HTML div with external images. (The following is an example, but in the actual case I am using Amazon S3, so downloading and storing the image on the same server is not an option) Currently I am using <a href="https://html2canvas.hertzen.com/">html2canvas</a> to convert the div to image. However, the external image is always replaced by a blank space.</p>

<p>The code I use to capture the image:</p>

<pre><code>$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
            }
        });
    });
}); 
</code></pre>

<p><strong>Edited:</strong> jsfiddle: <a href="https://jsfiddle.net/0y2zxxL8/3/">https://jsfiddle.net/0y2zxxL8/3/</a></p>

<p>I may use other library. I may also do that in backend. (I am using PHP + laravel 5 for backend) Is there a way I can generate a "screenshot" of the HTML div with external images?</p>

<p><strong>Update</strong> The current answer are working after editing. Yet, for my actual use, there will be multiple image with their position set by the user by drag and drop. I can still get the position, but it would be better for me if it is possible to not set the position specifically.</p>