javascript - html2canvas not displaying images in child divs - Stack Overflow

admin管理员组

文章数量:1326447

I am trying to work with html2canvas to create an image out of a div

Brief:

• I have an image (png) with a transparent area in it
• I have another image (can be jpg or png) that will be dragged/resized to look good inside the transparent area of the above image using a helper div
• I have the helper div that will have highest z-index with draggable and resizable

After user is happy he can click "done editing" to create a canvas with end result showing all images

<div id="container">
  <div id="artwork">
    <img src=".png" alt="photo1" border="0">
  </div>
  <div id="img">
    <img src=".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);
   }
 });
});

All javascript is on ready Everything work good in terms of resizing/dragging but html2canvas is not doing its job to display the images in a canvas for user to save

Here is a fiddle /

I have tried this code locally with the images on same path to the page with no luck

I tried the DataToURL as well and didn't return any image

Ultimately I would like the rendered image to be uploaded to the server if possible as well I am thinking the image needs to be converted to base code?

Thank you

I am trying to work with html2canvas to create an image out of a div

Brief:

• I have an image (png) with a transparent area in it
• I have another image (can be jpg or png) that will be dragged/resized to look good inside the transparent area of the above image using a helper div
• I have the helper div that will have highest z-index with draggable and resizable

After user is happy he can click "done editing" to create a canvas with end result showing all images

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

All javascript is on ready Everything work good in terms of resizing/dragging but html2canvas is not doing its job to display the images in a canvas for user to save

Here is a fiddle https://jsfiddle/p3vzgbzo/5/

I have tried this code locally with the images on same path to the page with no luck

I tried the DataToURL as well and didn't return any image

Ultimately I would like the rendered image to be uploaded to the server if possible as well I am thinking the image needs to be converted to base code?

Thank you

• javascript
• jquery
• html
• css
• html2canvas

Share Improve this question Follow asked Feb 4, 2018 at 15:14 MoeMoe 32511 gold badge44 silver badges1313 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Either the images in the #container must e from the same origin as the page, or you will have to embed them via base64.

Working JSFiddle with base64 images

This solution also will help someone. Elements with the absolute position are not rendering by default. Make sure all your elements are not absolute in position.

本文标签： javascripthtml2canvas not displaying images in child divsStack Overflow