html2canvas在子div中不显示图像 [英] html2canvas not displaying images in child divs
问题描述
我正在尝试使用html2canvas从div中创建图像
简述:
- 我有一个带有透明区域的图片(png)
- 我还有另一张图片(可以是jpg或png)，将被拖动/调整大小使用a在上面图像的透明区域内看起来不错助手div
- 我有一个辅助div，它的z-index值最高，并且可拖动且可调整大小
用户满意后，可以单击完成编辑"来创建一个画布，最终结果将显示所有图像
< 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 ="draagger"></div></div>< a href =#d" id ="done">完成编辑</a>身体 {填充:0;边距:0}#容器 {背景:#ccc;高度:400px；宽度:600像素}#艺术品 {宽度:100％;z索引:2；位置:绝对；}#artwork img {高度:400px；宽度:600像素}#img {位置:绝对；最高:0;左:0；宽度:100％;高度:100％;z索引:1；}#img img {职位:相对}#dragger {边框:虚线3px灰色；z索引:3；光标:全滚动}#完毕 {位置:绝对；正确:0；最高:0;z-索引:444；填充;5px;背景:黄色}$(#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({轴:"xy"，遏制:[0,0，right，bottom]，拖动:function(event，ui){$(#img img").css('top'，ui.offset.top +'px');$(#img img").css('left'，ui.offset.left +'px');}});$(#dragger").resizable({遏制:父母"});$("#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({轴:"xy"，遏制:[0,0，right，bottom]，拖动: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:是的，日志记录:是的，onrendered:功能(画布){document.body.appendChild(canvas);}});}); 所有javascript都已准备就绪就调整大小/拖动而言，一切工作都很好，但是html2canvas并没有执行将其显示在画布中以供用户保存的工作
这是一个小提琴 https://jsfiddle.net/p3vzgbzo/5/
我在本地尝试了此代码，页面上的图像位于同一路径上，没有运气
我也尝试了DataToURL，但未返回任何图像
如果可能的话，我最终还是希望将渲染的图像上传到服务器我认为图像需要转换为基本代码吗?
谢谢
#container 中的图像必须与页面来源相同，否则必须通过base64嵌入它们
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.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);
}
});
});
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.net/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
Either the images in the #container must come from the same origin as the page, or you will have to embed them via base64.
Working JSFiddle with base64 images
这篇关于html2canvas在子div中不显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
