CropperJS：画像の外枠のクロップボックスが表示されない

Question

私は、ユーザがアップロードした画像を切り抜くためにjavascript cropperjsを使用しています。クロップ表示では、クロップボックスの外側の画像は表示されません。下の画像に示されているのサンプル -

私クロッパーconfigがある -

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); 
} 

への不透明度を設定することがわかりました