How to convert a div with img tags to an image

I am trying to convert a div containing some img tags to a png. After some search, it looks like the best way is to use the html2canvas library.

The problem is that it is not working for me and I don't understand why.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css">
        <script src="lib/js/Blob.js"></script>
        <script src="lib/js/canvas-to-blob.min.js"></script>
        <script src="lib/js/FileSaver.js"></script>
        <script src="lib/js/html2canvas.js"></script>
        <script src="lib/js/jquery.min.js"></script>
        <script src="lib/js/underscore-min.js"></script>
        <title>Tests Only</title>
    </head>
    <body>
        <div id="navigationButtons">
        </div>

        <div id="sourceScreen" style="width:200px">
            <img id="lol" src="tier-icons/base_icons/bronze.png" />
        </div>

        <div id="targetScreen">
        </div>

        <script = "text/javascript">
        jQuery('#navigationButtons').append('<button type="button" id="makeScreenshot">Screenshot</button>');
        jQuery('#makeScreenshot').click(makeScreenshot);

        function makeScreenshot(){
          html2canvas(jQuery('#sourceScreen'), {
            onrendered: function(canvas) {
              jQuery('#targetScreen').html(canvas);
            }
          });
        }
        </script>
    </body>
</html>

Here is a jsFiddle of my code: https://jsfiddle.net/2vv79ehy/1/

I am trying to get it work with 1 img tag first on this example, the goal is to display the canvas under the real image. I know there is a problem with cross-domain resources with this library but when I do the test with my real code, the image is hosted on my computer.

Does anyone know how to do it or if there is another way (would be great if it could bypass cross-domain problems too)?

Solution

Your JSFiddle works, except for the cross-domain problem. I've played around trying to find a quick hack around it, but the best I could come up with is just drawing onto the canvas that you're given in your onrendered event and I haven't really played with positioning and the z-order would be impossible to implement this way, but maybe this edit to your makeScreenshot function helps you find a solution that works for you:

function makeScreenshot(){
  html2canvas(jQuery('#sourceScreen'), {
    onrendered: function(canvas) {
      var img = jQuery("#cat");
      var ctx = canvas.getContext("2d");
      var originalPosition = { left: 0, top: 18 };
      ctx.drawImage(img[0],originalPosition.left,originalPosition.top);
      jQuery('#targetScreen').html(canvas);
    }
  });
}