在image1上重叠image2

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

现在我们提供上传image2的选项，我们想要的是上传的image2应该像现在这样在现有的image1上重叠。

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

单击“ Run code Snippet ，请向下滚动位以查看结果。

Answer 1

加

 #case_canvas { z-index:-1 } 

对你的CSS。 这将在任何上传的图片后面放置带有案例轮廓的canvas。 但请确保上传的图片大小正确。 例如，通过.scale(x)或通过将宽度设置为canvas宽度的某个比例，因为它现在的方式，它将覆盖整个canvas，如果它足够大，并且shell根本不可见。

Answer 2

FabricJs将自己的canvas元素添加到DOM中，有两个：一个上部canvas基本上处理用于拖动/resize的事件和行，下部canvas用于渲染图像或对象。

您应该仅使用fabricJS框架，而不是添加另一个，将背景图像定义为fabric.Image。 您可以自定义它，以便用户无法修改。

添加z-index或重构你的html可能会修复你当前的问题，但请相信我：这不是你想要的方式。