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

이것은 이미 자르기가 통합 된 일종의 HTML 템플릿 안에 자르기 도구를 사용하고 캔버스 요소에 이미 다른 스타일이 적용되어 있기 때문에 발생할 수 있습니다.

이 클래스 .cropper 캔버스 내 경우

검사 나는 내가 사용 된 템플릿은 0

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

에 불투명도를 설정할 것을 발견