时间戳

首页 > 解决方案 > 裁剪图像 url 作为道具 React

javascript - 裁剪图像 url 作为道具 React

问题描述

我目前正在尝试从 (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 && <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>      
  )
}

现在，我想将 const base64image 中的裁剪图像作为道具传递给父组件（功能组件），我该怎么做？我在父组件上有这个

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

我对反应很陌生

标签： javascriptreactjs

解决方案

数据 URL 应该用作 imgsrc属性，如下所示：

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

推荐阅读