javascript - CropperJS：裁剪框外的图像不可见

Question

我正在使用 javascriptcropperjs来裁剪用户上传的图像。在裁剪器显示中，裁剪框外的图像不可见。下图中显示的示例 -

我的裁剪器配置是 -

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并且canvas元素已经应用了一些其他样式的html模板中使用了cropper。

检查这个类.cropper-canvas

就我而言，我发现我使用的模板将其不透明度设置为 0。

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