title: How to generate "screenshot" of html div with external images?
body: <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>