Overlap image2 auf image1

Question

Wir sind Anzeigen von image1 in Website wie folgt:

Jetzt geben wir eine Option image2 zu laden, und was wir wollen, ist hochgeladen image2 sollten existierte image1 wie here überlappen.

aber jetzt, wenn wir image2 laden, image1 auf image2 überlappt.

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); 
 
\t 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 
 
{ 
 
\t position:relative;top:900px; 
 
} 
 

 
.lower-canvas 
 

 
{ 
 
\t 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> \t 
 

 
<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>

, sobald Sie auf Run code Snippet klicken, scrollen Sie bitte etwas nach unten Ergebnisse zu sehen.

Answer 1

#case_canvas { 
    z-index:-1 
} 

zu Ihrem CSS hinzufügen. Dadurch wird die Leinwand mit dem Umriss des Gehäuses hinter den hochgeladenen Bildern positioniert. Stellen Sie jedoch sicher, dass das hochgeladene Bild die richtige Größe hat. B. durch oder indem die Breite auf einen bestimmten Anteil der Leinwandbreite eingestellt wird, weil es so aussieht, wie es jetzt ist, es wird die gesamte Leinwand abdecken, wenn es groß genug ist und das Gehäuse überhaupt nicht sichtbar ist.

Answer 2

FabricJs fügt Ihrem DOM eigene Canvas-Elemente hinzu. Es gibt 2: eine obere Canvas, die im Grunde Ereignisse und Linien zum Ziehen/Verändern behandelt, die untere Leinwand zum Rendern von Bildern oder Objekten.

Anstatt einen weiteren hinzuzufügen, sollten Sie nur das fabricJS-Framework verwenden und Ihr Hintergrundbild als fabric.Image definieren. Sie können es anpassen, damit es von Ihrem Benutzer nicht geändert werden kann.

Das Hinzufügen eines Z-Index oder das Neustrukturieren Ihres HTML-Codes können Ihre aktuellen Probleme beheben, aber vertrauen Sie mir: Es ist nicht die Art, wie Sie gehen möchten.