Overlap image2 on image1

问题

We are displaying image1 in site as below :

Now we are giving an option to upload image2, and what we want is uploaded image2 should overlap on existed image1 like here.

but now when we upload image2, image1 is overlapping on image2.

var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function (f) {
    var data = f.target.result;                    
    fabric.Image.fromURL(data, function (img) {
     // var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9);
	  var oImg = img.set({left: 0, top: 0, angle: 00, width: canvas.getWidth(), height: canvas.getHeight()});
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
    });
  };
  reader.readAsDataURL(file);
});


var img = new Image();
img.onload = function() {
  //draw after loading
  var canvas = document.getElementById('case_canvas');
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
}

img.src = "http://i.stack.imgur.com/xgNw7.png";
//^^ this will start loading the image

/*.canvas-container {
  background: url("http://i.stack.imgur.com/xgNw7.png") no-repeat fixed center;

  }
  */
 
 .canvas-container {
 width: 300px; height: 500px;  position: relative; -webkit-user-select: none; top:900px;
 }
 
 #canvas
 {
  border: 1px solid black;
  top:500px;
}

#file
{
	position:relative;top:900px;
}

.lower-canvas

{
	position: absolute; width: 300px; height: 500px; bottom:400px; left: 0px; -webkit-user-select: none;
}

.upper-canvas {
position: absolute; width: 300px; height: 500px; left: 0px; top: 0px; -webkit-user-select: none; cursor: default;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input  type="file" id="file"><br />
<canvas id="canvas" width="450" height="450"></canvas>	

<div class="canvas-container">
<canvas id="case_canvas" width="300" height="500" class="lower-canvas" ></canvas>
<canvas class="upper-canvas " width="300" height="500" ></canvas>
</div>

once you click on Run code Snippet, please scroll down bit to see results.

回答1:

Add

#case_canvas {
     z-index:-1 
}

to your css. This will position the canvas with the outline of the case behind any uploaded pictures. However make sure that the uploaded picture is then correct size. e.g by .scale(x) or by setting the width to some proportion of canvas width, because the way it is now, it will cover the whole canvas, if it's big enough, and the case won't be visible at all.

回答2:

FabricJs adds it's own canvas elments to your DOM, There are 2: one upper canvas basically handling events and lines for drag/resize, the lower canvas for rendering images or objects.

Instead of adding another one, you should use the fabricJS framework only, defining your background image as fabric.Image. You can customize it so it cannot be modified by your user.

Adding a z-index or restructuring your html may fix your current issues but trust me: It's not the way you want to go.

来源：https://stackoverflow.com/questions/38698382/overlap-image2-on-image1

标签

javascript

jquery

html

css

canvas