Блог

в настоящее время я пытаюсь реализовать обрезку из (react-image-crop) и учебника на YouTube. Обрезка:

 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 amp;amp; <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 amp;amp; <div className='col-6'>
            <img src={result} alt='Cropped Image' className='img-fluid' />
      
            </div> }
        </div>
     </div>      
  )
}
  

Теперь, когда обрезанное изображение в const base64image я хочу передать его в качестве реквизита для родительского компонента (функционального компонента), как мне это сделать? У меня это есть в родительском компоненте

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

Я очень новичок в react

URL-адрес данных следует использовать в качестве атрибута img src , например:

 <img src={base64Image} alt='Cropped Image' className='img-fluid' />