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

Question

我正在将 Adob​​e Creative SDK WEB 集成到我的 angularjs 网站。

我已遵循 Adob​​e 官方网站上的“图像编辑器 UI”指南还有一个使用 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() {
		$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。

感谢您的阅读。