2017-08-12 39 views
0

我正在将Adobe Creative SDK WEB集成到我的angularjs网站。Adob​​e Creative SDK网页加载后显示小图片

我按照官方Adobe网站 同时,也是“图像编辑器用户界面”指南一本例中使用angularjs:

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

在这两种情况下,我尝试使用动态和硬编码的id和图像src。

**这是工作**

当我点击“编辑”链接,编辑器打开罚款和启动加载图像。

加载时,图像大小与我的占位符大小完全相同。我用图像和链接表的

抓屏https://ibb.co/kZ5ama

**这到底是工作**

我得到的问题是这样的:

照片被加载后,大小缩小并进入左上角。

此外,当我尝试绘制它的顶部时,我必须先点击小照片内的照片,然后继续,好像照片的大小是整个屏幕。这里编辑的

屏幕捕捉,看看红色的行程结束,我的光标位置:https://ibb.co/iYJECF

这里是我的编辑链接

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

我的图像占位符

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

回答

1

的元素删除所有CSS,并检查元素后,我已经找到了罪魁祸首。这是CSS冲突,它使所有CANVAS元素具有100px的固定高度。

感谢您的阅读。

相关问题