브라우저 크기를 조정 한 후 CropperJS 잘못된 크기 조정 캔버스

Question

ReactCropper 마녀는 CropperJs를 사용하고 있습니다. 자르기 및 회전 기능을 사용하고 있습니다. 반응 형 기능에 문제가 있습니다. 브라우저의 크기를 더 작게 조정하면 큰 이미지가 너무 커지게됩니다. 여기에 업로드 된 이미지가 있습니다. 중심에 있지는 않지만 주요 문제는 아닙니다.

다음은 브라우저

크기를 조정 그리고 더 큰 다시 브라우저 창을 한 후, 이미지 이동 및 조정됩니다. 내가 구성 농작물에 대한 이러한 옵션을 사용하고

: 어떤 크기를 조절하거나 이동 문제지만 작물 상자가 모든 컨테이너에 걸쳐 이동이없는 viewMode={1} 내가 삭제하면

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

를 (I는 필요하지 않습니다 자르기 - 상자 - 비헤이비어, 이미지 내에서 이동해야 함).

어떤 아이디어가 문제입니까?

감사의 도움

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) 리스너를 윈도우 크기 조정 이벤트에 바인딩하고 캔바스 크기를 업데이트하고 이미지를 가운데에 배치하는 작업을 수행합니다. 필자는 이미지가 창 크기보다 작아야하므로 캔버스 크기를 업데이트해야합니다. 여기

캔버스 크기 업데이트하고 있습니다 :

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

을 그리고 창 내부 중심 :

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

을 또한, 나는 이미지 회전 후이 업데이트를 사용하고 있습니다.

희망, 도움이