javascriptangularjsadobecreativesdk

Adobe Creative SDK web displaying a small image after load

I'm integrating Adobe Creative SDK WEB to my angularjs website.

I have followed the "Image Editor UI" guide from official Adobe website And also a this example using angularjs:

https:// github.com/CreativeSDK/web-getting-started-samples/tree/master/image-editor-ui/image-editor-ui-angular-express>

In both cases I tried with dynamic and hard coded id and image src.

** This is working **

When I click the "edit" link, editor opens fine and start loading the image.

While loading, the image size is exactly the same as my placeholder size.

Screen capture of my table with image and link https://ibb.co/kZ5ama

** End this is working **

The problem I'm getting is this:

After the photo is loaded, the size shrinks and goes to the top left corner.

Also when I try to draw on top of it, I have to start by clicking inside the small photo and continue as if the size of the photo is the entire screen.

Screen capture of the editor here, look at the end of the red stroke and my cursor position: https://ibb.co/iYJECF

Here is my edit link 

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

My image placeholder 

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

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

Solution

  • After removing all CSS and inspecting element by element, I have found the culprit. It was a CSS conflict, which made all CANVAS element to have a fixed height of 100px.

    Thanks for reading.