我想在前端上传之前裁剪图像（反应）

Question

这是产品表单组件我想裁剪图像并在没有后端的情况下上传，然后将其上传到firebase存储
我想以恒定的纵横比自动或手动裁剪以适合卡或者我想在卡本身中裁剪它我尝试使用react-image -crop 但我没有成功，它需要大量设置，我不知道该怎么做

import React, { useState } from 'react'
import Input from '../../components/input/input.component'
import Button from '../../components/button/button.component'
import {db} from '../../firebase'
import './addproduct.styles.scss'
import { storage } from 'firebase'
import Spinner from '../../components/spinner/spinner.component'
const AddProduct = ({catigories}) => {
    const [name,setName] = useState('')
    const [price,setPrice] = useState('')
    const [catigory,setCatigory] = useState('')
    const [newCatigoryName,setNewCatigoryName] = useState('')
    const [newCatigoryImg,setNewCatigorImg] = useState(null)
    const [image,setImage] = useState(null)
    const [isSending,setIsSending] = useState(false)
    console.log(image)
    const handleSubmit = async (event) => {
        event.preventDefault()
        if(name && price  && image && catigory){
            setIsSending(true)
            if(catigory === 'addNewCatigory' && newCatigoryImg && newCatigoryName){
                await storage().ref().child(`catigories/${newCatigoryName}.jpg`).put(newCatigoryImg)
                const catigoryImgUrl = await storage().ref().child(`catigories/${newCatigoryName}.jpg`).getDownloadURL()
                await db.collection('catigories').doc(newCatigoryName).set({
                    name:newCatigoryName,
                    imgUrl:catigoryImgUrl
                })
                const storageId = `${name}-${price}-${catigory}`
                await storage().ref().child(`products/${storageId}.jpg`).put(image)
                const productImgUrl = await storage().ref().child(`products/${storageId}.jpg`).getDownloadURL()
                await db.collection('products').add({
                    name:name,
                    price: parseInt(price),
                    imgUrl:productImgUrl,
                    catigory:newCatigoryName
                })
                setIsSending(false)
            }else{
                const storageId = `${name}-${price}-${catigory}`
                await storage().ref().child(`products/${storageId}.jpg`).put(image)
                const productImgUrl = await storage().ref().child(`products/${storageId}.jpg`).getDownloadURL()
                await db.collection('products').add({
                    name:name,
                    price: parseInt(price),
                    imgUrl:productImgUrl,
                    catigory:catigory
                })
                setIsSending(false)
            }
        }
        
    }
    if(isSending){
        return <Spinner />
    }
    return (
        <div className='product'>
            <form onSubmit={handleSubmit} className="product__form">
                <Input placeholder='Enter Product Name' value={name} setValue={setName} width='100%' fontSize='20px' height='40px' borderRadius='20px'type='text' margin />            
                <Input placeholder='Product Price' value={price} setValue={setPrice} width='100%' fontSize='20px' height='40px' borderRadius='20px'type='number' margin />            
                <input type="file" onChange={(event) => event.target.files[0] ? setImage(event.target.files[0]) :null}/> 
                <select className='product__form__select' onChange={(event) => setCatigory(event.target.value)}>
                    <option value=''>Catigories</option>
                    {catigories.map(item => <option key={item.name} value={item.name}>{item.name}</option>)}
                    <option value='addNewCatigory'>other</option>
                </select>
                {catigory === 'addNewCatigory' ? 
                    <div className='product__form__addcatigory'>
                        <Input placeholder='Catigory Name' value={newCatigoryName} setValue={setNewCatigoryName} width='100%' fontSize='20px' height='40px' borderRadius='20px'type='text' margin />
                        <input type="file" onChange={(event) => event.target.files[0] ? setNewCatigorImg(event.target.files[0]) :null}/> 
                    </div>
                    : null
                }
                <Button title='add Item' width='100px' height='40px' style={{borderRadius:'20px'}}/>
            </form>
        </div>
    )
}

export default AddProduct

Answer 1

您可以在前端选择图像后裁剪图像。对于裁剪图像，这两个模块是最好的。

1. 反应简单作物
2. 反应图像裁剪。

这些模块的集成也很简单。