html2canvas 不在子 div 中显示图像

Question

我正在尝试使用 html2canvas 从 div 中创建图像

简介：

• 我有一张图片 (png)，其中有一个透明区域
• 我有另一个图像（可以是 jpg 或 png）将被拖动/调整大小 使用 辅助div
• 我有一个具有最高 z-index 且可拖动的辅助 div 和可调整大小

用户满意后，他可以点击“完成编辑”来创建一个画布，最终结果显示所有图像

<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);
   }
 });
});

所有的 JavaScript 都准备好了 在调整大小/拖动方面一切都很好，但 html2canvas 没有尽其所能在画布中显示图像以供用户保存

这是一个小提琴https://jsfiddle.net/p3vzgbzo/5/

我已经在本地尝试了这段代码，图片位于页面的同一路径上，但没有成功

我也尝试了 DataToURL，但没有返回任何图像

如果可能的话，我最终也希望将渲染的图像上传到服务器 我认为图像需要转换为基本代码？

谢谢

Answer 1

此解决方案也将帮助某人。默认情况下不渲染具有绝对位置的元素。确保所有元素的位置都不是绝对的。

Answer 2

#container 中的图像必须与页面来自同一来源，否则您必须通过 base64 嵌入它们。

Working JSFiddle with base64 images