1

在本地服务器上的网站上工作时，我遇到了Croppie.js的问题。仅当使用模式裁剪图像时才会出现此问题 - 例如，这里一切正常 [codepen]：( https://codepen.io/azerafati/pen/VzOGRe )

我能够使用下图在 Codepen 上重建问题。

要上传的图片

问题

使用 Codepen 上的模态，问题仅发生在编辑器视图中 - 图 B：（ [codepen]https://codepen.io/amatek/pen/GREvEbG ）。令人惊讶的是，细节视图中的一切似乎都按预期工作 - 图 A：[codepen]（https://codepen.io/amatek/details/GREvEbG）。

Codepen：（A）细节视图； (B) 编辑器视图

正常行为：在“详细信息”视图中使用模式上的缩放滑块时，图像从中心变换。

在此处输入图像描述

错误：但是，当在编辑器视图中时，图像会从一个角转换。当单击裁剪按钮时，这会以某种方式导致上传黑色图像。

在此处输入图像描述

有时（取决于应用的缩放量），而不是黑色图像：

  • 只上传图片的左侧，右侧被截断；或者
  • 上传的图像放大到角落。

即使未应用缩放，仍然存在错位。

环境

从我目前的测试来看，这个问题不会发生在移动浏览器上（尽管我只用 Google Chrome 和 Mozilla Firefox 进行了测试）。我注意到 Windows 7 和 10 台式机上的问题（我尚未在其他操作系统上进行测试）。

存在错误

  • Windows 10：谷歌 Chrome 和 Microsoft Edge
  • Windows 7：微软边缘

没有错误

  • Windows 10：火狐浏览器
  • Windows 7：谷歌浏览器和 Mozilla Firefox

到目前为止我的努力

我曾尝试调试croppie.css和croppie.js文件，但无济于事。但是，我强烈怀疑问题出在 js 文件中。它可能与 css transform-origin属性或用于获取图像尺寸的函数有关，在模态上返回不同的值。有谁知道这个问题的原因可能是什么？

4

2 回答 2

1

在模态中使用croppie时在最新的Chrome上遇到了这个问题帮助我改变了引导模态.modal-dialog类图像中的样式

您需要更新的样式

将 transform 设置为 unset 而不是使用 translate 函数。

希望对你也有帮助

于 2021-09-16T17:18:06.797 回答
0

至少对我来说，触发 modal('show') 时引导程序应用于外部模态 div 的额外填充似乎是导致问题的原因。一旦我删除了额外的填充，问题就解决了。似乎这种填充在裁剪或移动视口时会以某种方式混淆点计算。不过，我仍在使用较旧的引导程序版本，所以我不确定这是否可以解决较新的问题。

我在 Chrome 上遇到了这个问题，这可能只是他们上次更新造成的，因为一段时间以来一切正常。在 Mozilla 上，一开始就没有问题。

于 2021-09-14T14:44:25.270 回答