CropperJS toile de mise à l'échelle incorrecte après le redimensionnement du navigateur

Question

J'utilise ReactCropper qui utilise CropperJs. J'utilise des fonctions de recadrage et de rotation. J'ai un problème avec la fonction responsive. Lorsque vous redimensionnez le navigateur pour le réduire, puis pour agrandir l'image, elle devient trop volumineuse. Voici l'image téléchargée, comme vous le voyez n'est pas centré, mais le problème principal n'est pas là.

redimensionnement Voici le navigateur

Et après avoir fait la fenêtre du navigateur plus grand encore, l'image est décalée et mis à l'échelle.

J'utilise ces options pour configurer Cropper:

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

Lorsque je supprime viewMode={1} il n'y a pas de mise à l'échelle ou décalage des problèmes, mais la culture boîte se déplace sur tout conteneur (je ne suis pas besoin d'une telle le comportement de la boîte de culture, j'ai besoin qu'il bouge à l'intérieur de l'image).

Des idées quel est le problème?

Merci de pour toute aide

Answer 1

Ainsi,

pour l'instant, je trouve cette solution que la taille de la mise à jour manuelle et la position de l'image

1) Configuration du métayer:

<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) Lier l'écouteur à l'événement de redimensionnement de la fenêtre et effectuer une action de mise à jour de la taille du canevas et de centrage de l'image. J'ai besoin de mettre à jour la taille de la toile car l'image devrait être plus petite que la taille de la fenêtre dans mon cas.

est ici mise à jour du format de la toile:

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

Et le centrage dans la fenêtre:

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

Aussi, j'utilise cette mise à jour après la rotation de l'image.

Espérons, ça aide