0

im currently trying to implement a cropper from (react-image-crop) and a tutorial on youtube. The cropper is:

export const Cropper = (base64Image) => {   
    const [src, selectFile] = useState(null); 
    const handleFileChange = e => {
      selectFile(URL.createObjectURL(e.target.files[0]))
    }
    const [image, setImage] = useState(null)
    const [crop, setCrop] = useState({ aspect: 16 / 9,width: 300, height:200 });
    const [result, setResult] = useState(null);
    
    function getCroppedImg() {
      const canvas = document.createElement('canvas');
    const scaleX = image.naturalWidth / image.width;
    const scaleY = image.naturalHeight / image.height;
    canvas.width = crop.width;
    canvas.height = crop.height;
    const ctx = canvas.getContext('2d');

    ctx.drawImage(
      image,
      crop.x * scaleX,
      crop.y * scaleY,
      crop.width * scaleX,
      crop.height * scaleY,
      crop.width,
      crop.height,
      0,
      0,
    );
    
    const base64Image = canvas.toDataURL('image/jpeg');
    setResult(base64Image);
    } 
    return (
      <div className= 'container'>
        <div className = 'column' padding = '1rem'> 
            <div  className = 'col-6'>
              <input type = 'file' accept='image/*' onChange= {handleFileChange} />
            </div>
            {src && <div className = 'col-6' padding ='1rem'>
                <ReactCrop src={src} onImageLoaded={setImage} crop={crop} onChange={setCrop} />
                <Button color = 'secondary' variiant='outlined' onClick={getCroppedImg}> Crop Image </Button> 
           </div> }

            {result && <div className='col-6'>
            <img src={result} alt='Cropped Image' className='img-fluid' />
      
            </div> }
        </div>
     </div>      
  )
}

Now that cropped image in const base64image i want to pass it as a prop on a parent component (funcional component) how do I do that? I have this on the parent component

 {base64Image && 
            <div className='col-6'>
            <img src="require('image/jpeg')" alt='Cropped Image' className='img-fluid' />
            </div> }
        

I'm very new on react

1 Answer 1

0

The data URL should be used as the img src attribute, like so:

<img src={base64Image} alt='Cropped Image' className='img-fluid' />
2
  • The data URL can be used as the image src attribute. Maybe try console logging the data URL to make sure it is the value you are expecting. If that doesn't help, you could make a codepen or js fiddle to reproduce the issue and I'll help you get it working from there.
    – Zacx
    Oct 25, 2020 at 17:58
  • I consolloged it from the child componente and it shows: data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ so the url data is fine, but it seems to be that props is not supporting this type of data. So i don't what could be the solution. Someone told me that i could try context hook but i dont know how to do it Oct 26, 2020 at 17:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.