CropperJS：图像外部裁剪框不可见

Question

我正在使用javascript cropperjs裁剪用户上传的图片。在裁剪器显示中，裁剪框外部的图像不可见。示例如下图所示 -

我的裁剪器配置是 -

var cropper_opts = {
  aspectRatio: 1/1,
  viewMode: 0,
  crop: function(e){}, //to show the crop box manually
  minCanvasWidth: 0,
  minCanvasHeight: 0,
  minCropBoxWidth: 0,
  minCropBoxHeight: 0,
  minContainerWidth: 860,   //decides the size of image
  minContainerHeight: 355,  //decides the size of image
  autoCropArea: 1,
  modal: true,      // Show the black modal
  guides: true,     // Show the dashed lines for guiding
  center: true,     // Show the center indicator for guiding
  highlight: true,  // Show the white modal to highlight the crop box
  background: true, // Show the grid background
}

请帮我解决这个问题。

Answer 1

这可能正在发生，因为你在某些已经集成了cropper的html模板中使用了cropper，而canvas元素已经应用了其他一些样式。

检查此类 .cropper-canvas

在我的情况下，我发现我使用的模板将其不透明度设置为0.

.cropper-canvas {
  cursor: crosshair;
  background-color: #fff;
  opacity: 0; /* that's the problem */
  filter: alpha(opacity=0);
}