Question

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

以下是代码：

<html>
<head>

<script>
	
		function allowDrop(e)
        {
            e.preventDefault();
        }

        function drag(e)
        {
            //store the position of the mouse relativly to the image position
            e.dataTransfer.setData("mouse_position_x",e.clientX - e.target.offsetLeft );
            e.dataTransfer.setData("mouse_position_y",e.clientY - e.target.offsetTop  );

            e.dataTransfer.setData("image_id",e.target.id);
        }

        function drop(e)
        {
            e.preventDefault();
            var image = document.getElementById( e.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=new Image();
        imageObj.onload=function(){
            ctx.save();
			ctx.drawImage(this,0,0,canvas.width,canvas.height);
            ctx.restore();
		}
		
		 imageObj.src="bg.png";
        
            // the image is drawn on the canvas at the position of the mouse when we lifted the mouse button
            ctx.drawImage( image , e.clientX - canvas.offsetLeft - mouse_position_x , e.clientY - canvas.offsetTop - mouse_position_y );
        }

        function convertCanvasToImage() {
            var canvas = document.getElementById('canvas');
	

            var image_src = canvas.toDataURL("image/png");
            window.open(image_src);
	
        }
		
		
    </script>  
    
	<style type="text/css">
    
	body {
	  text-align: center;
}

#wrapper {
	  text-align: left;
	  width: 870px;
	  height:566px;
	  margin-left: auto;
	  margin-right: auto;
}

#options{
	width: 70px;
	height:566px;
	float:left;
}

#options img {
	margin-bottom: 15px;
}

#canvas{
	width:800px;
	height:566px;
	float:left;
	background-image:url(../images/bg.png);
}

    </style>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>

<div id="options">
        
          <img id="img1" draggable="true" ondragstart="drag(event)" src='estrela.png'>
            <img id="img2" draggable="true" ondragstart="drag(event)" src='bola.png'>
            <img id="img3" draggable="true" ondragstart="drag(event)" src='sino.png'>
            <img id="img4" draggable="true" ondragstart="drag(event)" src='bota.png'>
            <img id="img5" draggable="true" ondragstart="drag(event)" src='anjo.png'>
            <img id="img6" draggable="true" ondragstart="drag(event)" src='laco.png'>
            
        </div>

        <canvas id="canvas" onDrop="drop(event)" onDragOver="allowDrop(event)" width="800" height="566"></canvas>
        
<input type="button" onClick="convertCanvasToImage()" value="Gerar Imagem" style="float:right"/>

</body>

谢谢！

Answer 1

查看此帖子，该帖子允许您从工具栏拖动图像并将其放在画布上：

HTML5 drag and drop images from a toolbar to a canvas

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

$("#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);

});

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

将图像拖到画布上并保存png

1 个答案: