angular-pintura nicht Breite und Höhe laden

Question

Ich habe Schwierigkeiten, Winkel-Pintura-Arbeit zu machen. Die Bildquelle ist geladen, aber die Breite und Höhe der Leinwand ist immer noch 0. Ich muss die Anzeige anpassen (auf Hochformat/Querformat drehen, die Breite des Browsers anpassen), damit die richtige Breite und Höhe des Bildes geladen wird .

Here ist die Github-Quelle für Winkel-Pintura.

Und hier ist mein Code -

AngularJS (Gang Source Image)

Controller-Imageviewer

function imageViewerController($modalInstance, params, $scope) { 
    var vm = this; 

    vm.image = { 
     src: params.src, 
     position: { 
      x: -137.5, 
      y: -68 
     }, 
     scaling: 2, 
     maxScaling: 5, 
     scaleStep: 0.11, 
     mwScaleStep: 0.09, 
     moveStep: 99, 
     fitOnload: true, 
     progress: 0 
    } 
} 

HTML

<ng-pintura ngp-src="vm.image.src" ngp-scaling="vm.image.scaling" ngp-position="vm.image.position" 
    ngp-max-scaling="vm.image.maxScaling" ngp-scale-step="vm.image.scaleStep" ngp-move-step="vm.image.moveStep" ngp-mw-scale-step="vm.image.mwScaleStep" ngp-fit-onload="vm.image.fitOnload" ngp-progress="vm.image.progress"> 
    <div id="zoomslider"> 
     <input ng-model="slider.value" ng-change="sliderChange()" orient="vertical" type="range" min="0" max="100" step="1" ng-disabled="scalingDisabled"> 
    </div> 
    <button id="zoomin" ng-click="zoomIn()" ng-disabled="scalingDisabled" class="btn btn-default hidden-xs"><span class="glyphicon glyphicon-plus"></span></button> 
    <button id="zoomout" ng-click="zoomOut()" ng-disabled="scalingDisabled" class="btn btn-default hidden-xs"><span class="glyphicon glyphicon-minus"></span></button> 
    <button id="moveup" ng-click="moveUp()" class="btn btn-default hidden-xs"><span class="glyphicon glyphicon-chevron-up"></span></button> 
    <button id="movedown" ng-click="moveDown()" class="btn btn-default hidden-xs"><span class="glyphicon glyphicon-chevron-down"></span></button> 
    <button id="moveleft" ng-click="moveLeft()" class="btn btn-default hidden-xs"><span class="glyphicon glyphicon-chevron-left"></span></button> 
    <button id="moveright" ng-click="moveRight()" class="btn btn-default hidden-xs"><span class="glyphicon glyphicon-chevron-right"></span></button> 
    <button id="movecenter" ng-click="fitInView()" class="btn btn-default"><span class="glyphicon glyphicon-screenshot"></span></button> 
</ng-pintura> 

Answer 1

Es ist obligatorisch, width und height explizit in Ihren Stylesheets festzulegen.

ng-pintura { 
    position: relative; 
    display: block; 
    width: 100%; 
    height: 600px; 
    background: black; 
} 

Ich nahm den CSS-Code von Angular-Pinturas Github-Seite.