加载后显示小图像的 Adobe Creative SDK Web

Question

我正在将 Adobe Creative SDK WEB 集成到我的 angularjs 网站。

我已遵循 Adobe 官方网站的 "Image Editor UI" 指南还有一个使用 angularjs:

的例子

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

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

** 这是有效的 **

当我单击 "edit" link 时，编辑器正常打开并开始加载图像。

加载时，图像大小与我的占位符大小完全相同。

我的 table 截图和 link https://ibb.co/kZ5ama

** 结束这个工作 **

我遇到的问题是：

图片加载完成后，尺寸缩小并移到左上角。

另外，当我尝试在它上面绘图时，我必须先在小照片内部单击，然后继续，就好像照片的大小就是整个屏幕一样。

这里是小编的截图，看红色笔划的结尾和我的光标位置：https://ibb.co/iYJECF

这是我的编辑 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>

我的图片占位符

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

Answer 1

删除所有 CSS 并逐个元素检查后，我找到了罪魁祸首。这是一个 CSS 冲突，导致所有 CANVAS 元素的高度固定为 100px。

感谢阅读。

加载后显示小图像的 Adobe Creative SDK Web

Adobe Creative SDK web displaying a small image after load

javascript

angularjs

adobecreativesdk

加载后显示小图像的 Adob​​e Creative SDK Web

Adobe Creative SDK web displaying a small image after load

javascript

angularjs

adobecreativesdk

加载后显示小图像的 Adobe Creative SDK Web