Take screenshot of current html page using html2canvas?

Question

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

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 html2canvas.

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

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

Here is my code

html

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

  <div ng-class="{squareLayer: link[2] == 255, rectangleLayer: link[2] == 55}">

    <img id="mobileAd" source="{{here it goes each url}}" width="{{ link[1] }}" height="{{ link[2] }}">


 </div>
</div>

<button id="saveTemplate" type="button" name="button" class="btn btn-default" ng-click="downloadTemplate()">take screenshot</button>

javascript/angular

$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();

}
});
}

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