如果正确加载了源图像，CropperJS会以0px x 0px的尺寸预览

编程问答 2022-06-10

问题描述

以下代码段与我的项目中CropperJS的处理方式非常接近。 CropperJS在一个小的概念验证中确实非常有效，但是我发现至少在我的项目中预览无法正确显示。进一步的测试表明，如果我加载了无效的图像并随后更改了图像来源，则可以预览工作。但是，如果在CropperJS接管时正确加载了图像，则根本不会显示预览，预览的宽度和高度均为0px。在元素检查器中强制预览具有更大的尺寸，这表明预览元素可以正确加载图像，但仍会强制尺寸使其不可见。

我的问题是：

  • 是什么原因造成的？
  • 这是我的错吗（例如，我应该在他们的GitHub上提交问题）吗？

我对StackOverflow还是陌生的，所以请告诉我您是否需要其他信息，我会尽快答复。

一些工作预览示例的来源：

var cropperJS = window.Cropper
var image = document.getElementById('cropperImage')
var cropper = new cropperJS(image,{
  aspectRatio: 1 / 1,viewmode: 2,preview: document.getElementById('preview'),})
img {
  max-width: 100%;
}

img-preview {
  overflow: hidden;
  width: 250px;
  height: 250px;
}
<!-- CropperJS styling -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.5/cropper.min.css" />

<!-- CropperJS core script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.5/cropper.min.js"></script>

<!-- Main cropping canvas -->
Main cropping canvas should appear here:
<div class="img-container">
  <img src="http://placekitten.com/150/150" id="cropperImage" />
</div>

<!-- Preview being given the dimensions (0px X 0px) -->
<p>Preview should appear here:</p>
<div>
  <div class="img-preview" id="preview"></div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

cropcropperjshtmljavascriptpreviewpreview