我正在尝试使用 html2canvas 从 div 创建图像
Brief:
- 我有一个图像(png),其中有一个透明区域
- 我有另一个图像(可以是 jpg 或 png)将被拖动/调整大小
使用a在上图的透明区域内看起来不错
辅助分区
- 我有一个辅助 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 = "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/ https://jsfiddle.net/p3vzgbzo/5/
我在本地尝试了此代码,图像位于页面的同一路径上,但没有成功
我也尝试了 DataToURL,但没有返回任何图像
最终,如果可能的话,我希望将渲染的图像上传到服务器
我在想图像需要转换为基本代码吗?
谢谢