Javascript 在画布上拖动图像并保存png

我正在使用放置在画布元素中的圣诞树图像创建一个应用程序，在画布元素中可以拖动图像。使用可拖动图像装饰树后，用户必须能够将整个构图（画布+图像）保存为PNG文件。问题是：当我将图像拖到画布上时，它们隐藏在圣诞树后面。你能帮我修一下吗

代码如下：

函数allowDrop（e）
{
e、 预防默认值（）；
}
函数拖动（e）
{
//存储鼠标相对于图像位置的位置
e、 setData（“鼠标位置”，e.clientX-e.target.offsetLeft）；
e、 setData（“鼠标位置”，e.clientY-e.target.offsetTop）；
e、 dataTransfer.setData（“image_id”，即target.id）；
}
功能下降（e）
{
e、 预防默认值（）；
var image=document.getElementById（例如dataTransfer.getData（“image_id”））；
var mouse_position_x=e.dataTransfer.getData（“mouse_position_x”）；
var mouse_position_y=e.dataTransfer.getData（“mouse_position_y”）；
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var imageObj=新图像（）；
imageObj.onload=函数（）{
ctx.save（）；
drawImage（this，0,0，canvas.width，canvas.height）；
ctx.restore（）；
}
imageObj.src=“bg.png”；
//当我们抬起鼠标按钮时，图像在画布上的鼠标位置绘制
ctx.drawImage（image，e.clientX-canvas.offsetLeft-mouse_position_x，e.clientY-canvas.offsetTop-mouse_position_y）；
}
函数convertCanvasToImage（）{
var canvas=document.getElementById（'canvas'）；
var image_src=canvas.toDataURL（“image/png”）；
窗口。打开（图像\u src）；
}
身体{
文本对齐：居中；
}
#包装纸{
文本对齐：左对齐；
宽度：870px；
高度：566px；
左边距：自动；
右边距：自动；
}
#选择权{
宽度：70px；
高度：566px；
浮动：左；
}
#选项img{
边缘底部：15px；
}
#帆布{
宽度：800px；
高度：566px；
浮动：左；
背景图像：url（../images/bg.png）；
}

查看这篇文章，它允许您从工具栏拖动图像并将它们放到画布上：

创建完树后，可以通过将画布转换为图像并在新的浏览器选项卡中显示图像，将画布另存为图像。然后，用户可以右键单击将该映像保存到其本地驱动器：

$("#save").click(function(){

    var html="<p>Right-click on image below and Save-Picture-As</p>";

    html+="<img src='"+canvas.toDataURL()+"' alt='image from canvas'/>";

    var tab=window.open();

    tab.document.write(html);

});

$（“#保存”）。单击（函数（）{
var html=“右键单击下面的图像并将图片另存为”
”；
html+=“”；
var tab=window.open（）；
tab.document.write（html）；
});

---

一些浏览器（Chrome、Firefox）甚至允许用户右键单击画布元素本身并将其保存为图像。

可能会将画布元素放在所有img元素之前？我已经尝试过了。。。不起作用：（非常感谢您的帮助！它运行良好，我刚刚添加了一个脚本，允许单击按钮保存图像，但它只在Chrome上起作用。来源如下：