html2canvas not displaying images in child divs

Question

I am trying to work with html2canvas to create an image out of a div

Brief:

• I have an image (png) with a transparent area in it
• I have another image (can be jpg or png) that will be dragged/resized to look good inside the transparent area of the above image using a helper div
• I have the helper div that will have highest z-index with draggable and resizable

After user is happy he can click "done editing" to create a canvas with end result showing all images

<div id="container">
  <div id="artwork">
    <img src="http://preview.ibb.co/gsvuPR/photo1.png" alt="photo1" border="0">
  </div>
  <div id="img">
    <img src="http://puckerupbuttercup.files.wordpress.com/2016/02/0092-happy-alone.jpg"/>
  </div>
  <div id = "dragger">
  </div>
</div>
  <a href="#d" id="done">
  done editing
  </a>


body {
  padding: 0;
  margin: 0
}
#container {
  background: #ccc;
  height: 400px;
  width: 600px
}
#artwork {
  width: 100%;
  z-index: 2;
  position: absolute;
}

#artwork img {
  height: 400px;
  width: 600px
}

#img {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
  z-index: 1;
}
#img img {
  position: relative
}
#dragger {
  border: dashed 3px grey;
  z-index: 3;
  cursor: all-scroll
}
#done {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 444;
  padding; 5px;
  background: yellow
}


$("#img img").css("max-width",$("#artwork img").width());
$("#img img").css("max-height",$("#artwork img").height());
$("#dragger").css("max-width",$("#artwork img").width()-5);
$("#dragger").css("max-height",$("#artwork img").height()-5);
var img_h = $("#img img").height()-5;
var img_w = $("#img img").width()-5;

var right = $("#artwork img").width()-img_w-5;
var bottom = $("#artwork img").height()-img_h-5;

$("#dragger").width(img_w);
$("#dragger").height(img_h);

$("#dragger").draggable({
  axis: 'xy', 
  containment : [0,0,right,bottom],
  drag: function( event, ui ) {
        $("#img img").css('top', ui.offset.top +'px');
    $("#img img").css('left', ui.offset.left +'px');
  }
});

$("#dragger").resizable({
    containment: "parent"
});

$( "#dragger" ).on( "resize", function( event, ui ) {
    $("#img img").css('width', ui.size.width +5+'px');
  $("#img img").css('height', ui.size.height +5+'px');
  var img_h = $("#img img").height()-5;
    var img_w = $("#img img").width()-5;
  var right = $("#artwork img").width()-img_w-5;
    var bottom = $("#artwork img").height()-img_h-5;
  $("#dragger").draggable({
  axis: 'xy', 
  containment : [0,0,right,bottom],
  drag: function( event, ui ) {
        $("#img img").css('top', ui.offset.top +'px');
    $("#img img").css('left', ui.offset.left +'px');
  }
});
});

$("#done").on("click",function(){
 $("#dragger").toggle();
 html2canvas($("#container"), {
   allowTaint: true,
   logging: true,
   onrendered: function (canvas) {
    document.body.appendChild(canvas);
   }
 });
});

All javascript is on ready Everything work good in terms of resizing/dragging but html2canvas is not doing its job to display the images in a canvas for user to save

Here is a fiddle https://jsfiddle.net/p3vzgbzo/5/

I have tried this code locally with the images on same path to the page with no luck

I tried the DataToURL as well and didn't return any image

Ultimately I would like the rendered image to be uploaded to the server if possible as well I am thinking the image needs to be converted to base code?

Thank you

Answer 1

Either the images in the #container must come from the same origin as the page, or you will have to embed them via base64.

Working JSFiddle with base64 images

Answer 2

This solution also will help someone. Elements with the absolute position are not rendering by default. Make sure all your elements are not absolute in position.