react-image-crop

react-image-crop copied to clipboard

Hello, I'm displaying photo taken by react-webcam in react-image-crop component. With the code posted below, I'm able to make the screenshot fit the full size of the window for some devices (Galaxy S5 emulator (360x640) and on my PC (1707x956px)). However, it doesn't work on the iPad (768x1024)/iPhone/Pixel 2 emulators. With the style attribute I am able to make the camera (before capture) fit the window size fully on any device. Why is it that I can't do the same for the screenshot in react crop component?

Here is a link to the sandbox: https://codesandbox.io/s/8to8e?file=/src/App.js

This is my webcam component:

                <ReactCrop
                  className="preview"
                  src={src}
                  crop={crop}
                  ruleOfThirds
                  onImageLoaded={this.onImageLoaded}
                  onComplete={this.onCropComplete}
                  onChange={this.onCropChange}
                  style={{ overflow: "hidden" }}
                  imageStyle={{
                    overflow: "hidden",
                    minWidth: "100%",
                    minHeight: "100%",
                    objectFit: "contain",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center"
                  }}
                />

Any help would be appreciated!

Hello @lukagrbec did you find a solution ?

Hi @pCyril, unfortunately I didn't find the solution.