Changing crop to use aspect throws an error

Using the following example code throws a type error:

Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The provided value is not of type ‘(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)’

import React from "react";
import ReactDOM from "react-dom";
import ReactCrop, { makeAspectCrop } from "react-image-crop";
import "react-image-crop/dist/ReactCrop.css";

import "./styles.css";

class App extends React.Component {
  state = {
    src: null,
    crop: {
      x: 10,
      y: 10,
      aspect: 1,
      height: 80
    }
  };

  onSelectFile = e => {
    if (e.target.files && e.target.files.length > 0) {
      const reader = new FileReader();
      reader.addEventListener(
        "load",
        () =>
          this.setState({
            src: reader.result
          }),
        false
      );
      reader.readAsDataURL(e.target.files[0]);
    }
  };

  onImageLoaded = async (image, pixelCrop) => {
    this.setState({ image });
    if (pixelCrop) {
      const finalImage = await this.getCroppedImg(
        image,
        pixelCrop,
        "newFile.jpeg"
      );
      this.setState({ finalImage });
    }
  };

  onCropComplete = async (crop, pixelCrop) => {
    const finalImage = await this.getCroppedImg(
      this.state.image,
      pixelCrop,
      "newFile.jpeg"
    );
    this.setState({ finalImage });
  };

  onCropChange = crop => {
    this.setState({ crop });
  };

  getCroppedImg(image, pixelCrop, fileName) {
    const canvas = document.createElement("canvas");
    canvas.width = pixelCrop.width;
    canvas.height = pixelCrop.height;
    const ctx = canvas.getContext("2d");

    ctx.drawImage(
      image,
      pixelCrop.x,
      pixelCrop.y,
      pixelCrop.width,
      pixelCrop.height,
      0,
      0,
      pixelCrop.width,
      pixelCrop.height
    );

    // As Base64 string
    // const base64Image = canvas.toDataURL('image/jpeg');

    // As a blob
    return new Promise((resolve, reject) => {
      canvas.toBlob(file => {
        file.name = fileName;
        resolve(file);
      }, "image/jpeg");
    });
  }

  render() {
    return (
      <div className="App">
        <div>
          <input type="file" onChange={this.onSelectFile} />
        </div>
        {this.state.src && (
          <ReactCrop
            src={this.state.src}
            crop={this.state.crop}
            onImageLoaded={this.onImageLoaded}
            onComplete={this.onCropComplete}
            onChange={this.onCropChange}
          />
        )}
        <img
          src={
            this.state.finalImage &&
            window.URL.createObjectURL(this.state.finalImage)
          }
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

[JavaMajk]

Nevermind I misread your issue, this happens because when using an aspect from it calls onChange and onCropComplete with the filled in crop so it gets set to state. This happens before the onImageLoad event so you can add a safeguard:

onCropComplete = async (crop, pixelCrop) => {
    if (this.state.image) {
      const croppedImageUrl = await this.getCroppedImg(
        this.state.image,
        pixelCrop,
        "newFile.jpeg"
      );
      this.setState({ croppedImageUrl });
    }
  };

Yeah perfect, thats about how I solved it. just got puzzled as it did not happen with just using height & width instead of aspect in the crop object. Thank you for your prompt reply and help @DominicTobias! 💯

[DominicTobias]

Released in 6.0.2 and updated sandbox demo, see note on setting image ref to state:

Patch release to change order of calls when using aspect crops - onImageLoaded is called before onChange and onComplete so that getting an image reference before making a crop on the client is more convenient in this situation. Note that if you set the image ref to state (which is probably unnecessary), then it won’t exist by the time onChange and onComplete are called so it’s recommended that you don’t. Refer to the sandbox example if you’re confused.

I’m going to make another change soon so that onChange and onComplete are called when you pass an initial crop so you don’t have to set the crop in multiple places.