html2canvas 图像未呈现答案

【问题标题】：html2canvas images not renderinghtml2canvas 图像未呈现
【发布时间】：2014-12-20 20:00:13
【问题描述】：

使用 html2canvas，我无法在输出 div 中渲染图像。我确实读过该图像必须位于同一来源下。因此，我将图像与 html 放在同一目录下。

很遗憾，控制台日志中没有错误。

我附上了一个小提琴（我不确定图像是否可以与外部 url 一起正常工作，但它给出了我希望实现的目标）。

我的本地代码看起来有点像这样：

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>

【问题讨论】：

您遇到的问题在0.4.1版本之后已经修复。示例：jsfiddle.net/512063kz
所以如果我只是更新我的库应该没问题？
是的，假设图像是同源的
@MichaelBole 你得到解决方案了吗？

标签： javascript image canvas render html2canvas

【解决方案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;
  }
}

【讨论】：