reactjscropperjs

react-cropper - Not working properly with public images


I am working on a react project with react-cropper docs here

The images I am getting are coming from Laravel public files like /public_html/public/images/etc

I am able to load image and preview is also working after adding param checkCrossOrigin={false}.

I am getting error when i trying to crop it. some images are working fine who has access-control-allow-origin: *

Here is what i am trying with my react script

var srcImg = 'path/of/laravel/public/image/img.png';
<Cropper
  style={{ height: 400, width: "100%" }}
  zoomTo={0.5}
  initialAspectRatio={1}
  preview=".img-preview"
  src={srcImg}
  checkCrossOrigin={false}
  viewMode={1}
  minCropBoxHeight={10}
  minCropBoxWidth={10}
  background={true}
  responsive={true}
  autoCropArea={1}
  checkOrientation={false}
  onInitialized={(instance) => {
    setBusinessImgCropper(instance);
  }}
  guides={true}
/>

I think the issue is on laravel public images. Or still it can be fixed let me know.

Thanks!


Solution

  • Update

    Following changes worked for me

    withCredentials={true}