html2canvas 不在子 div 中显示图像

Question

我正在尝试使用 html2canvas 从 div

中创建图像

简介：

我有一张图片 (png)，其中有一个透明区域
我有另一张图片（可以是 jpg 或 png）dragged/resized 为了在上图的透明区域内看起来不错，使用助手 div
我有助手 div 具有最高的 z-index 和可拖动并可调整大小

用户满意后，他可以单击 "done editing" 创建一个 canvas，最终结果显示所有图像

<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 已准备就绪就 resizing/dragging 而言，一切都很好，但 html2canvas 没有完成其工作，无法在 canvas 中显示图像供用户保存

这里有一个fiddlehttps://jsfiddle.net/p3vzgbzo/5/

我已经在本地尝试过这段代码，但没有成功

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

最终我希望渲染后的图片也能上传到服务器我在想图像需要转换为基本代码吗？

谢谢

Answer 1

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

Working JSFiddle with base64 images

Answer 2

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

html2canvas 不在子 div 中显示图像

html2canvas not displaying images in child divs

html

javascript

css

jquery

html2canvas