Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Crop Outline is not visible and renders below image

See original GitHub issue


I have used react-image-crop for a long time. When I tried to use it in a different part of my app, I experienced an odd issue.

The crop outline is rendering invisible and below the image being loaded. Any idea why this might be happening?


constructor(props) {

        this.state = {
            src: null,
            crop: {
                unit: "%",
                width: 50,
                aspect: 1
            modalOpen: false

        this.onCropChange = this.onCropChange.bind(this);

    toggleCropperModal = () => {
        this.setState({ modalOpen: !this.state.modalOpen})

    onSelectFile = e => {
        if ( && > 0) {
          const reader = new FileReader();
          reader.addEventListener("load", () =>
            this.setState({ src: reader.result, modalOpen: true })

    onImageLoaded = image => {
        this.imageRef = image;

    onCropChange = (crop, pixelCrop) => {
        // You could also use percentCrop:
        // this.setState({ crop: percentCrop });
        this.setState({ crop, pixelCrop });

    onCropComplete = () => {
      this.makeClientCrop(this.state.crop, this.state.pixelCrop);
      this.setState({ modalOpen: false})

    async makeClientCrop(crop, pixelCrop) {
        if (this.imageRef && crop.width && crop.height) {
          const croppedImageUrl = await this.getCroppedImg(
          this.setState({ croppedImageUrl });

    getCroppedImg(image, pixelCrop, fileName) {
        const canvas = document.createElement("canvas");
        canvas.width = pixelCrop.width;
        canvas.height = pixelCrop.height;
        const ctx = canvas.getContext("2d");
        return new Promise((resolve, reject) => {
          canvas.toBlob(blob => {
            if (!blob) {
              //reject(new Error('Canvas is empty'));
              console.error("Canvas is empty");
   = fileName;
            this.fileUrl = window.URL.createObjectURL(blob);
          }, "image/jpeg");
<Section style={{display: 'inline-block'}} width='85%' marginBottom='35px'>
      {src && <ReactCrop
          imageStyle={{width: '100%', textAlign: 'center'}}

If someone could point me in the right direction, that would be helpful!

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

donigianrpcommented, Aug 7, 2019

Ok solved it. I didn’t import the css. So the crop didn’t have styles. I’m assuming the guy is also having a css issue. Where it’s either getting overridden or not imported.

kvpendergastcommented, Aug 7, 2019

Yep, same problem. Just fixed.

import "react-image-crop/dist/ReactCrop.css";

Read more comments on GitHub >

github_iconTop Results From Across the Web

My background image get cut off at the bottom - Stack Overflow
Pros: Full image is displayed. Cons: Image may be look stretched. And sometimes you will see empty space around the image.
Read more >
How To Scale and Crop Images with CSS object-fit
In this example image, there is vertical space above and below the image because the declared height is taller than the scaled-down height....
Read more >
Crop images in Photoshop Elements - Adobe Support
The Crop tool removes the part of an image surrounding the selection. Crop to remove distractive background elements and create a focus on ......
Read more >
Customize an image | Jetpack Compose - Android Developers
Specify a contentScale option to crop or change how an image is scaled inside its bounds. By default, if you don't specify a...
Read more >
Preventing Content Reflow From Lazy-Loaded Images
Reflow is a problem because it's a user-blocking operation. It slows down the browser by forcing it to recalculate the layout of any...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found