html2canvas images not rendering

Question

working away with the html2canvas and i'm having trouble with rendering the images in the output div. I did read that the image must reside under the same origin. I have therefore put my images under the same directory as the html.

There is no error in the console log unfortunately.

I've attached a fiddle (i'm not sure images will work properly with an external url but it gives the jist of what I wish to achieve).

http://jsfiddle.net/8ypxW/433/

my local code looks a little like this:

html2canvas(document.body, {
    onrendered: function(canvas) {
        document.body.appendChild(canvas);
    }
});

           $("#btnSave").click(function() { 
          html2canvas($("#widget"), {
              onrendered: function(canvas) {
                  theCanvas = canvas;
                  document.body.appendChild(canvas);

                  // Convert and download as image 
                  Canvas2Image.saveAsPNG(canvas); 
                  $("#img-out").append(canvas);
                  // Clean up 
                  //document.body.removeChild(canvas);
                }
            });

   <div id="widget">
    <h1>test</h1>
    <img src="dropboxlogo.jpg"/>
   </div>

Answer 1

Little bit too late , but solution is to transport all images to base64

function toDataUrl(src, callback, outputFormat) {
  var img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = function() {
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.height;
    canvas.width = this.width;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
    callback(dataURL);
  };
  img.src = src;
  if (img.complete || img.complete === undefined) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
  }
}