2

我在我的 jhipster 项目中使用这里ng-img-crop提到的步骤。在我的开发人员模式下（即在 STS 中）它工作正常。但是当我创建我的 jhipster 项目的 WAR 文件时，它的行为不正常。

通过图像可以观察到差异

  1. STS 行为从 STS 运行时的页面截图
  2. WAR 文件行为从 WAR 文件运行时的页面截图

我在选择相同图像时发现的显着差异是：画布（在检查元素部分下的图像中突出显示）自行采用 margin-top 和 margin-left。

在选择图像之前（在 STS 和 WAR 的两个页面中）：

<div class="cropArea ng-hide" ng-show="showCropDiv">
    <img-crop image="myImage" result-image="myCroppedImage" area-type="square" change-on-fly="false" class="ng-isolate-scope">
        <canvas width="0" height="0" style="margin-top: 0px;"></canvas>
    </img-crop>
</div>

选择图像后

在 STS 的页面中：

<div class="cropArea" ng-show="showCropDiv">
    <img-crop image="myImage" result-image="myCroppedImage" area-type="square" change-on-fly="false" class="ng-isolate-scope">
         <canvas width="500" height="333" style="margin-top: -166.682px; margin-left: -250px; cursor: default;"></canvas>
    </img-crop>
</div>

并在 WAR 文件的页面中：

<div class="cropArea" ng-show="showCropDiv">
    <img-crop image="myImage" result-image="myCroppedImage" area-type="square" change-on-fly="false" class="ng-isolate-scope">
       <canvas width="149" height="100" style="margin-top: -50px; margin-left: -74.9932px; cursor: default;"></canvas>
   </img-crop>
</div>

有没有办法解决这个问题？任何建议或指示都会非常有帮助。提前致谢。

4

0 回答 0