react-cropper URL insanely long

I’m trying to save cropped images using react-cropper. It seems to work as intended, but the URL that gets saved is crazy long. The console log of the data package alone is often over 100kb, and that’s just a data URL.

When I console log (and send to a DB) I store a value that starts with data:image/png;base64,iVBORw0... and then continues so long it takes me about 20 seconds to scroll to the end of it in my IDE.

I notice it’s also an issue in the code sandbox from the official docs.

I took my code directly from that demo, but I’ll paste it here as well for ease.

export const CropperWidget = ({ userPhoto }) => {
  const [image, setImage] = useState(userPhoto);
  const [cropData, setCropData] = useState("");
  const [cropper, setCropper] = useState();

  const onChange = (e) => {
    e.preventDefault();
    let files = e.target.files;
    const reader = new FileReader();
    reader.onload = () => {
      setImage(reader.result);
    };
    reader.readAsDataURL(files[0]);
  };

  const getCropData = () => {
    if (typeof cropper !== "undefined") {
      setCropData(cropper.getCroppedCanvas().toDataURL());
    }
  };

  useEffect(() => {
    if (cropData) {
      postImage(cropData);
    }
  });

  return (
    <div>
      <br />
      <div>
        <input type="file" onChange={onChange} />
        <br />
        <br />
        <Cropper
          style={{ height: 400, width: 400 }}
          initialAspectRatio={1}
          preview=".img-preview"
          src={image}
          viewMode={1}
          guides={true}
          minCropBoxHeight={10}
          minCropBoxWidth={10}
          background={false}
          responsive={true}
          autoCropArea={1}
          checkOrientation={false} // https://github.com/fengyuanchen/cropperjs/issues/671
          onInitialized={(instance) => {
            setCropper(instance);
          }}
        />
      </div>
      <button onClick={getCropData}>Crop Image</button>
      <br />
    </div>
  );
};

Answer

Send the data to a server, convert it to a binary, store it somewhere (e.g. your server’s hard disk or Amazon S3), give it an HTTP URL, then use the HTTP URL in future.

Advertisement

Answer