Take screenshot of current html page using html2canvas?
<p>I'm building a chrome extension and it loads a list of images inside an iphone template img using bootstrap carousel.  So each iphone template has a different image.  The image is loaded by urls in the source attribute</p>

<p>Let's say the user picks an image and would like to have a screenshot of the image with iphone template included.  I added a button to download the image using <code>html2canvas</code>.</p>

<p>It downloads the screenshot but without the image, and I can't seem to figure it out why.  Is it because the <code>img src</code> attribute is an URL.</p>

<p>If so what other ways I can use to take a screenshot w/ or w/out html2canvas.</p>

<p>Here is my code</p>

<p>html</p>

<pre><code>&lt;div class="template-container"&gt;
  &lt;img id="mobileImg" ng-show="link[2] == 255" src="../img/template_square_banner.jpg" alt=""&gt;
  &lt;img id="mobileImg" ng-show="link[2] == 55" src="../img/template_rectangle_banner.png" alt=""&gt;

  &lt;div ng-class="{squareLayer: link[2] == 255, rectangleLayer: link[2] == 55}"&gt;

    &lt;img id="mobileAd" source="{{here it goes each url}}" width="{{ link[1] }}" height="{{ link[2] }}"&gt;


 &lt;/div&gt;
&lt;/div&gt;

&lt;button id="saveTemplate" type="button" name="button" class="btn btn-default" ng-click="downloadTemplate()"&gt;take screenshot&lt;/button&gt;
</code></pre>

<p>javascript/angular</p>

<pre><code>$scope.downloadTemplate = function(){

  html2canvas($(".template-container"), {
onrendered: function(canvas) {
  var a = document.createElement('a');
  // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
  a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
  a.download = 'somefilename.jpg';
  a.click();

}
});
}
</code></pre>

<p>It would be awesome i can take a screenshot of the template, your help will be appreciated!</p>