html2canvas изображения не отображаются

Question

работает с html2canvas, и у меня возникают проблемы с рендерингом изображений в выходном div. Я читал, что изображение должно находиться под одним и тем же происхождением. Поэтому я поместил свои изображения в тот же каталог, что и html.

К сожалению, в журнале консоли отсутствует ошибка.

Я прикрепил скрипку (я не уверен, что изображения будут работать правильно с внешним url, но это дает сущность того, чего я хочу достичь).

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

мой местный код выглядит немного как это:

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

Немного слишком поздно, но решение транспортировать все изображения в 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; 
    } 
}