Question

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

简介：

我有一个带透明区域的图像（png）
我有另一张图片（可以是jpg或png），会被拖动/调整大小使用a在上面图像的透明区域内看起来很好助手div
我有一个辅助div，它具有最高的z-index和draggable

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

<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

html2canvas不在子div中显示图像

2 个答案: