Wie platziere ich Leinwand nur auf einem zentrierten Bild und nicht auf der gesamten Seite?

Question

Verwendung von angularjs in meiner Anwendung und Verwendung von fabric.js für Canvas-Funktionen.

Hier ist mein HTML-Code:

<div id="imageContainer" style=" width: 100%; height: 90vh; overflow: hidden"> 
     <img id="imageId" align="middle" ng-src="{{image}}" on-load="setCanvasOnLoad()"/> 
</div> 
<div id="canvas-section"> 
     <canvas id="drawingCanvas"></canvas> 
</div> 

Mein Bild in der Mitte der Seite ausgerichtet ist. Die Leinwand ist jedoch über die Seite verteilt. Hier ist, wie ich eine Leinwand auf das Bild zu erstellen:

var deferred = $q.defer(); 
    $timeout(function() { 

    var image = angular.element(document.querySelectorAll("#reboxImage"))[0]; 
       var drawingCanvasObject = angular.element(document.querySelectorAll("#drawingCanvas"))[0]; 
       var canvasContainer = angular.element(document.querySelectorAll("#canvas-section"))[0]; 

       drawingCanvasObject.width = image.offsetWidth; 
       drawingCanvasObject.height = image.offsetHeight; 

       canvasContainer.top = image.getBoundingClientRect().top; 
       canvasContainer.left = image.getBoundingClientRect().left; 
       drawingCanvasObject.style.zIndex = 15; 
       drawingCanvasObject.style.position = "absolute"; 
       if (drawingCanvasObject.width > 0 && drawingCanvasObject.height > 0) { 
        if (!MyService.getCanvas()) { 
         MyService.setCanvas(new fabric.Canvas('drawingCanvas', {selection: false})); 
        } 
       } 

    return deferred.promise; 

Die CSS für # Leinwand-Abschnitt wird wie folgt:

#canvas-section{ 
    z-index: 10; /* <- higher than your canvases if it needs to go on top */ 
    position: absolute; 
    left: 0; 
    top: 0; 
} 

Wie können wir sicherstellen, dass die Breite der Leinwand, Höhe, Position, links, top usw. sind immer mit dem Bild ausgerichtet und gleich?

Bild angehängt:

Answer 1

Sie können Ihre 'Leinwand-Abschnitt' Element innerhalb eines 'imageContainer' Element setzen und zu 'imageContainer' der Stil 'position: relative' hinzuzufügen. In diesem Fall wird Ihre Leinwand absolut, aber relativ zum Bildcontainer positioniert.

UPDATE:

Versuchen Sie, Ihren Code wie folgt neu zu ordnen:

.wrapper { 
 
    text-align: center; 
 
    width: 100%; 
 
    } 
 

 
.centered-wrapper { 
 
    height: 230px; 
 
    display: inline-block; 
 
    position: relative; 
 
    } 
 

 
.content-covering-image { 
 
    color: #fff; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 20px; 
 
    }

<div class="wrapper"> 
 
    <div class="centered-wrapper"> 
 
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRQZHFAgf3rw0Eg_Mdx3PaGUYd4-9BB1fr503Tg0wjbivpFDTthSw"/> 
 
    
 
    <span class="content-covering-image">canvas</span> 
 
    </div> 
 
</div>

Natürlich die Klassennamen verwenden, die Ihren Zweck und Stil passen.