在image1上重叠image2 [英] Overlap image2 on image1

问题描述

我们正在网站上显示image1，如下所示：

现在我们给一个选项来上传image2，我们想要的是上传的image2应该与现有的image1重叠，例如这里。

< a>

但现在我们上传image2时，image1在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}）。 var oImg = img.set（{left：0，top：0，angle：00，width：canvas.getWidth（），height：canvas.getHeight（）}）; canvas.add（oImg）.renderAll a = canvas.setActiveObject（oImg）; var dataURL = canvas.toDataURL（{format：'png'，quality：0.8}）;}）; }; reader.readAsDataURL（file）;}）; var img = new Image（）; img.onload = function（）{//加载后绘制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\";//^^这将开始加载图片 

  / *。canvas-container {background：url （http://i.stack.imgur.com/xgNw7.png）无重复固定中心; } * / .canvas-container {width：300px; height：500px;位置：相对; -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;}。 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 =fileid =file>< br />< canvas id =canvaswidth = 450height =450>< / canvas> < div class =canvas-container>< canvas id =case_canvaswidth =300height =500class =lower-canvas>< / canvas& upper-canvaswidth =300height =500>< / canvas>< / div>  运行代码段后，请向下滚动鼠标以查看结果。
 
 
 $ p 
 
 < 
解决方案
添加
  #case_canvas {
 z -index：-1 
} 
  
这将定位画布与任何上传的图片后面的案例的轮廓。但是，请确保上传的图片大小正确。例如通过 .scale（x）或通过将宽度设置为某一比例的画布宽度，因为它现在的方式，它将覆盖整个画布，如果它足够大，并且案例根本不可见。
 
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.
解决方案
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.

                        
这篇关于在image1上重叠image2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！