2017-08-12 2 views
0

Ich integriere Adobe Creative SDK WEB in meine angularjs-Website.Adobe Creative SDK-Web zeigt nach dem Laden ein kleines Bild an

Ich habe die "Image Editor UI" Führer von offizieller Adobe-Website Und auch dieses Beispiel mit AngularJS gefolgt:

https: // github.com/CreativeSDK/web-getting-started-samples/tree/Master/Bild-Editor-UI/Bild-Editor-UI-Winkel-Express>

In beiden Fällen versuchte ich mit dynamischen und hart codierten ID und Bild src.

** Dieses arbeitet **

Wenn ich auf den Link „Bearbeiten“, Editor öffnet sich fein und starten Sie das Bild zu laden.

Während des Ladens entspricht die Bildgröße genau meiner Platzhaltergröße.

Bildschirmerfassung meiner Tabelle mit Bild und Link https://ibb.co/kZ5ama

** Dieses Ende arbeitet **

Das Problem Ich erhalte, ist dies:

Nachdem das Foto geladen wird, die Größe schrumpft und geht zur oberen linken Ecke.

Auch wenn ich versuche, darüber zu zeichnen, muss ich beginnen, indem ich in das kleine Foto klicke und fortfahre, als ob die Größe des Fotos der gesamte Bildschirm ist.

Bildschirmerfassung des Editors hier, schauen Sie am Ende des roten Strich und meine Cursor-Position: https://ibb.co/iYJECF

Hier ist mein Link Bearbeiten

<a href="javascript:;" id="edit-image-button" class="btn btn-primary btn-block button-panel" ng-click="launchEditor('image_'+$index, item2)"> 
 
Edit Image 
 
</a>

Mein Bild-Platzhalter

<a ng-click="openLightboxModal(name2,'notsynced')" > 
 
<img id="image_{{$index}}"class="img-responsive" src="{{item2}}" alt=""> 
 
</a>

$scope.getImageEditor = function() { 
 
\t \t $scope.imageEditor = new Aviary.Feather({ 
 
\t \t \t apiKey: "My id is here", 
 
\t \t \t onSave: function(imageID, newURL) { 
 
\t \t \t $scope.currentImageSrc = newURL; 
 
\t \t \t $scope.imageEditor.close(); 
 
\t \t \t $scope.$digest(); 
 
\t \t \t console.log(newURL); 
 
\t \t \t }, 
 
\t \t \t onError: function(errorObj) { 
 
\t \t \t \t console.log(errorObj.code); 
 
\t \t \t \t console.log(errorObj.message); 
 
\t \t \t \t console.log(errorObj.args); 
 
\t \t \t } 
 
\t \t }); 
 
\t } 
 
\t 
 
    \t $scope.launchEditor = function(imageId, imageURL) { 
 
\t \t $scope.originalImageSrc = imageURL; 
 
\t \t $scope.currentImageSrc = $scope.originalImageSrc; 
 
\t \t console.log(imageId); 
 
\t \t console.log(imageURL); 
 
\t \t $scope.imageId = imageId; 
 
\t \t var terms = /^https?:///; 
 
\t \t var isUrl = $scope.currentImageSrc.match(terms); 
 
\t \t 
 
\t \t if (isUrl) { 
 
\t \t \t $scope.imageEditor.launch({ 
 
\t \t \t \t image: $scope.imageId, 
 
\t \t \t \t url: $scope.currentImageSrc 
 
\t \t \t }); 
 
\t \t } 
 
\t \t else { 
 
\t \t \t $scope.imageEditor.launch({ 
 
\t \t \t \t image: $scope.imageId 
 
\t \t \t }); 
 
\t \t } 
 
\t }

Antwort

1

Nachdem alle CSS Entfernen und Prüfen Element für Element, habe ich den Schuldigen gefunden. Es war ein CSS-Konflikt, bei dem alle CANVAS-Elemente eine feste Höhe von 100 Pixeln hatten.

Danke fürs Lesen.

Verwandte Themen