2017-08-12 61 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的固定高度。

感謝您的閱讀。

相關問題