Convert HTML with Images to Image

I am using convas for creating image from html but it not creating image as expected.My html is :

<article class="well well-centered well-theme" id="card-outer">
      <div id="card">

        <div id="top-left-corner" class="corners"></div>
        <div id="top-right-corner" class="corners"></div>
        <div id="top-center-corner"></div>

        <p class="text-center"><img src="http://ift.tt/1NVtGV9" alt="Pet" class="img-responsive"></p>

        <div class="row">

          <aside class="col-sm-6">
            <div class="form-group">
             <div id="img1">
              <img src="http://ift.tt/1yf5ZW9" alt="" class="img-responsive">
              </div>
              <table class="form-action" style="height: 326px; display: none;">
                <tbody><tr>
                    <td>
                      <i class="fa fa-pencil-square-o button white" onclick="image_section(1);"></i>
                      <span class="sr-only">Edit</span>                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </aside>

          <aside class="col-sm-7 margin-bothzero">
            <div class="form-group">
            <div id="img2">
             <img src="http://ift.tt/1NVtGVd" alt="" width="219" height="176" class="img-responsive">
             </div>
              <table class="form-action" style="display: none; height: 183px;">
                <tbody><tr>
                    <td>
                      <i class="fa fa-pencil-square-o button white" onclick="image_section(2);"></i>
                      <span class="sr-only">Edit</span>                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="form-group">
            <div id="img3">
              <img src="http://ift.tt/1yf5ZWb" alt="" width="219" height="177" class="img-responsive">
              </div>
              <table class="form-action" style="display: none; height: 184px;">
                <tbody><tr>
                    <td>
                      <i class="fa fa-pencil-square-o button white" onclick="image_section(3);"></i>
                      <span class="sr-only">Edit</span>                    </td>
                  </tr>
                </tbody>
              </table>
            </div>


          </aside>

        </div>

        <article>
          <div class="form-group">
         <div id="inline_editor1" onclick="inline_editor(1);" class="text-center">
            <h1>Mr. Snuggles</h1>
              </div>           
            <table class="form-action" style="display: none; height: 103px;">
              <tbody><tr>
                  <td>
                    <i class="fa fa-pencil-square-o button white" onclick="inline_editor(1);"></i>
                    <span class="sr-only">Edit</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </article>


        <div id="bottom-left-corner" class="corners"></div>
        <div id="bottom-right-corner" class="corners"></div>
        <div id="bottom-center-corner"></div>

      </div>
    <canvas width="746" height="833"></canvas></article>

Its running formate like this :

While output seems like this : Its miss images inside the div.I used this code for image creation.

<script src="http://ift.tt/12ouBKw"></script><script language="javascript">
html2canvas([document.getElementById('card-outer')], {
    onrendered: function (canvas) {
        document.getElementById('card-outer').appendChild(canvas);
        var data = canvas.toDataURL('image/png');
        // AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server

        var image = new Image();
        image.src = data;
        document.getElementById('img-responsive').appendChild(image);
    }
});
</script> 

What am i doing wrong ? thanks for any help