ブラウザサイズ変更後のCropperJSスケーリングキャンバスが正しくない

Question

私はReactCropperの魔法使いはCropperJsを使用しています。 私はクロップと回転機能を使用しています。 レスポンシブ機能に問題があります。ブラウザーのサイズを小さくしてからサイズを大きくすると、画像が大きくなりすぎる（大きくスケーリングされたように）。 ここにアップロードされた画像ですが、中央には表示されませんが、主な問題はそれにありません。

はここでブラウザ

をサイズ変更や大きな再びブラウザウィンドウをした後、画像がシフトしてスケーリングされます。

私が設定しクロッパーのためにそのようなオプションを使用しています：

  <Cropper 
        ref='cropper' 
        src={image} 
        style={{height: '100%', width: '100%'}} 
        background={false} 
        viewMode={1} 
        zoomOnTouch={false} 
        zoomOnWheel={false} 
        aspectRatio={1} 
        guides={false} 
        restore={true} 
       /> 

私はviewMode={1}を削除するとそこには、スケーリングやシフトの問題がありませんが、トリミングボックスは、すべてのコンテナの上に動いている（私は、そのような必要はありません。クロップボックスの振る舞い、私はそれがイメージ内を動いている必要があります）。

何か問題がありますか？

感謝の任意のヘルプ

Answer 1

だから、今の

については、私は画像の手動更新の大きさや位置などの解決策を見つけた

クロッパーの1）構成：

<Cropper 
        ref='cropper' 
        src={image} 
        style={{height: '100%', width: '100%'}} 
        viewMode={1} 
        background={false} 
        aspectRatio={1} 
        guides={false} 
        dragMode="none" 
        movable={false} 
        zoomable={false} 
        minCanvasWidth={320} 
        minCanvasHeight={320} 
        minCropBoxWidth={160} 
        minCropBoxHeight={160} 
        checkOrientation={true} 
        restore={true} 
        autoCropArea={0.5} 
       /> 

2）リスナをウィンドウリサイズイベントにバインドし、キャンバスサイズを更新してイメージのセンタリングを行うアクションを実行します。私は、キャンバスのサイズを更新する必要があります。なぜなら、イメージは私の場合、ウィンドウのサイズより小さくなければならないからです。私は画像の回転の後に、このアップデートを使用しています、また

centerImage() { 
     let container = this.refs.cropper.getContainerData(), 
      canvas = this.refs.cropper.getCanvasData(), 
      height = canvas.height, 
      width = canvas.width; 

     let top = Math.abs((container.height - height)/2), 
      left = Math.abs((container.width - width)/2); 

     this.refs.cropper.setCanvasData({ 
      top, 
      left 
     }); 
    } 

：

updateCanvasSize() { 
    let koef = 0.9, // how smaller than window viewport image should be 
     container = this.refs.cropper.getContainerData(), 
     allowedSize = Math.min(container.width, container.height) * koef, 
     image = this.refs.cropper.getImageData(), 
     imgW = Math.round(image.width), 
     imgH = Math.round(image.height), 
     originalW = Math.round(image.naturalWidth), 
     originalH = Math.round(image.naturalHeight), 
     newH, newW, scale = 1; 

    if (Math.abs((this.degrees/90) % 2) > 0) { //if image was rotated 
     let t = imgW; 
     imgW = imgH; 
     imgH = t; 
    } 

    if (allowedSize < imgH || imgW > allowedSize) { 
     if (imgW > imgH) { 
      scale = allowedSize/imgW; 
      if (imgH * scale > allowedSize) { 
       scale = allowedSize/imgH; 
      } 
     } 
     else { 
      scale = allowedSize/imgH; 
      if (imgW * scale > allowedSize) { 
       scale = allowedSize/imgW; 
      } 
     } 
    } 

    newW = Math.round(scale * imgW); 
    newH = Math.round(scale * imgH); 

/* this part is needed if you want to keep size of small images */ 
     if (Math.abs((this.degrees/90) % 2) > 0) { 
      if (newW >= originalH && newH >= originalW) { 
       newW = originalH; 
       newH = originalW; 
      } 
     } else { 
      if (newW >= originalW && newH >= originalH) { 
       newW = originalW; 
       newH = originalH; 
      } 
     } 
/* end */ 

    this.refs.cropper.setCanvasData({ 
     width: newW, 
     height: newH 
    }); 
} 

そして、窓の内側中心に：ここで

は、キャンバスのサイズを更新しています。

希望、それは役に立ちます