在 image1 上重叠 image2答案

【问题标题】：Overlap image2 on image1在 image1 上重叠 image2
【发布时间】：2016-08-01 22:07:33
【问题描述】：

我们在网站中显示 image1 如下：

现在我们提供了一个上传 image2 的选项，我们想要上传的 image2 应该与现有的 image1 重叠，例如 here。

但是现在当我们上传 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}).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>

点击Run code Snippet后，请向下滚动查看结果。

【问题讨论】：

你的 sn-p 说Uncaught ReferenceError: fabric is not defined
@NaeemShaikh 也许你应该在 Jsfiddle 中上传 fabric.js ？
@NaeemShaikh 请向下滚动一点并使用choose file 选项上传图片。
@cssbeginner 试过了.. 没用
@NaeemShaikh 我在这里使用相同的代码创建了 jsfilldle：jsfiddle.net/dtw2ejxb

标签： javascript jquery html css canvas

【解决方案1】：

添加

#case_canvas {
     z-index:-1 
}

到你的CSS。这会将画布与任何上传的图片后面的案例轮廓一起定位。但是，请确保上传的图片大小正确。例如通过.scale(x) 或将宽度设置为画布宽度的某个比例，因为现在的方式，如果它足够大，它将覆盖整个画布，并且根本看不到外壳。

【讨论】：

对不起，但它确实对我有用 here
@cssbeginner 嘿，谢谢！那你成功了吗？
您的解决方案适用于我发布的有问题的代码，我为其他代码尝试了您的解决方案，所以它对我没有用。我们正在计划其他方式，非常感谢您一直以来的支持。

【解决方案2】：

FabricJs 将它自己的画布元素添加到您的 DOM，有 2 个：一个上层画布基本上处理事件和用于拖动/调整大小的线条，下层画布用于渲染图像或对象。

你应该只使用fabricJS框架，而不是添加另一个，将你的背景图像定义为fabric.Image。您可以对其进行自定义，使其无法被您的用户修改。

添加 z-index 或重组 html 可能会解决您当前的问题，但请相信我：这不是您想要的方式。

【讨论】：