如何在 React.js 中实现编辑照片，如 LinkedIn 编辑背景功能？

Question

任何人有经验或想法如何实现编辑照片功能，如在 LinkedIn 中编辑照片或 React.js 中的背景？

这是我想要的功能。

1. 可以上传图片
2. 显示图片
3. 编辑上传的图片
4. 放大/缩小
5. 旋转
6. 删除

Answer 1

使用 react-cropper 包，它是cropper.js 的反应版本。您可以使用它执行所需的所有功能。此代码需要进行一些更改，还需要从cropper.js 添加旋转功能。

import React, { useState, useRef } from "react";
import Cropper from "react-cropper";
import Button from "@material-ui/core/Button";
import "cropperjs/dist/cropper.css";
import Grid from '@material-ui/core/Grid';
import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import CheckCircleIcon from '@material-ui/icons/CheckCircle';
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';
import CancelIcon from '@material-ui/icons/Cancel';

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
button: {
    backgroundColor: "#2774b8",
    '&:hover': {
        backgroundColor: "#2774b8",
    }
},
toolsCtr: {
    display: 'flex',
    padding: '0.5rem'
},
tooltip: {
    marginRight: '0.5rem'
},
icnBtn: {
    padding: '8px',
    borderRadius: '3px',
    backgroundColor: '#f0f8ff'

},
icn: {
    fontSize: '1.5rem',
    color: '#2774b8'
},
cropperCtr: {
    border: '2px solid #d9e5f0'
}
}))



export default function Crop(props) {
const cropperRef = useRef();
 const classes = useStyles();
const [uploadedImg, setUploadedImg] = useState(props && props.image)
const [croppedLiveUrl, setCoppedLiveUrl] = useState("");
const [croppedData, setCoppedData] = useState({ url: "", data: {} });

const selForProcessing = () => {
    props.useImage(croppedLiveUrl);
}


const _onMoveCropBox = () => {

    if (null !== cropperRef.current) {
        
setCoppedLiveUrl(cropperRef.current.cropper.getCroppedCanvas().toDataURL());
        setCoppedData({ url: "", data: {} });
    }
};

const _onMoveImageLeft = () => {
    if (null !== cropperRef.current) {
        cropperRef.current.cropper.move(-10, 0);
    }
}

const _onMoveImageRight = () => {
    if (null !== cropperRef.current) {
        cropperRef.current.cropper.move(10, 0);
    }
}

const _onMoveImageTop = () => {
    if (null !== cropperRef.current) {
        cropperRef.current.cropper.move(0, -10);
    }
}

const _onMoveImageBottom = () => {
    if (null !== cropperRef.current) {
        cropperRef.current.cropper.move(0, 10);
    }
}

return (
    <React.Fragment>
        <div className={classes.cropperCtr}>
            <Grid container spacing={2}>
                <Grid item xs={12} sm={12} md={12} lg={12}>

                    <Cropper
                        ref={cropperRef}
                        src={uploadedImg}
                        style={{ height: 400, width: "100%", overflow: 
      'scroll' }}
                        guides={false}
                        crop={() => { _onMoveCropBox() }}
                        crossOrigin={"true"}
                        autoCrop={false}
                        movable={true}
                        move={() => { _onMoveImageTop() }}

                    />

                </Grid>
            </Grid>
            <div className={classes.toolsCtr}>

                <Tooltip title="Use Selection" aria-label="use" className=. 
      {classes.tooltip}>
                    <IconButton className={classes.icnBtn} onClick={() => {
                        selForProcessing()
                    }}>
                        <CheckCircleIcon className={classes.icn} />
                    </IconButton>
                </Tooltip>

                <Tooltip title="Move Left" aria-label="left" className= 
      {classes.tooltip}>
                    <IconButton className={classes.icnBtn} onClick={() => {
                        _onMoveImageLeft()
                    }}>
                        <ArrowBackIcon className={classes.icn} />
                    </IconButton>
                </Tooltip>

                <Tooltip title="Move Right" aria-label="right" className= 
          {classes.tooltip}>
                    <IconButton className={classes.icnBtn} onClick={() => {
                        _onMoveImageRight()
                    }}>
                        <ArrowForwardIcon className={classes.icn} />
                    </IconButton>
                </Tooltip>

                <Tooltip title="Move Top" aria-label="top" className=. 
        {classes.tooltip}>
                    <IconButton className={classes.icnBtn} onClick={() => {
                        _onMoveImageTop()
                    }}>
                        <ArrowUpwardIcon className={classes.icn} />
                    </IconButton>
                </Tooltip>

                <Tooltip title="Move Down" aria-label="down" className={classes.tooltip}>
                    <IconButton className={classes.icnBtn} onClick={() => {
                        _onMoveImageBottom()
                    }}>
                        <ArrowDownwardIcon className={classes.icn} />
                    </IconButton>
                </Tooltip>

               
            </div>
        </div>
    </React.Fragment >
);
 }