Question

我有一个图像上传表单，该表单在CardMedia组件中显示了上传的图像，然后您可以使用CSS转换旋转来旋转图像（初始旋转将在服务器上进行）。尽管CardMedia在渲染图像时会做出响应，但是在旋转时不会调整纵横比。结果是，例如，当图像旋转90°时，该图像不适合CardMedia。

有什么想法，当我按下旋转按钮时如何刷新CardMedia组件，以便更正CardMedia的长宽比？

我附上了一个演示这个的小演示。

https://codesandbox.io/s/material-cardmedia-imageupload-with-rotate-ov4tj?file=/demo.tsx

import React, { useState } from "react";
import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import {
  Card,
  CardActionArea,
  CardMedia,
  CardActions,
  Grid
} from "@material-ui/core";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      "& > *": {
        margin: theme.spacing(1)
      }
    },
    input: {
      display: "none"
    }
  })
);

export default function UploadButtons() {
  const classes = useStyles();
  const [image, setImage] = useState("");
  const [rotation, setRotation] = useState(0);

  const handleUploadClick = (e: React.ChangeEvent<HTMLInputElement>) => {
    const imageUrl = URL.createObjectURL(e.target.files[0]);
    setImage(imageUrl);
  };

  const handleRotation = () => {
    let newValue = rotation + 90 >= 360 ? 0 : rotation + 90;
    setRotation(newValue);
  };

  return (
    <Grid container className={classes.root} spacing={2}>
      <Grid item xs={12}>
        <Grid container justify="center" spacing={2} >
          <Grid>
            <Card className={classes.root}>
              <CardActionArea>
                {image ? (
                  <CardMedia
                    component="img"
                    image={image}
                    style={{ transform: `rotate(${rotation}deg)` }}
                  />
                ) : (
                  <CardMedia
                    component="img"
                    alt="Contemplative Reptile"
                    image="https://via.placeholder.com/300"
                    title="placeholder image"
                  />
                )}
              </CardActionArea>
              <CardActions>
                <input
                  accept="image/*"
                  className={classes.input}
                  id="contained-button-file"
                  multiple
                  type="file"
                  onChange={e => {
                    if (e.target.files !== null) {
                      handleUploadClick(e);
                    }
                  }}
                />
                <label htmlFor="contained-button-file">
                  <Button variant="contained" color="primary" component="span">
                    Upload
                  </Button>
                </label>
                {image && (
                  <Button
                    variant="contained"
                    color="secondary"
                    onClick={() => handleRotation()}
                  >
                    Rotate
                  </Button>
                )}
              </CardActions>
            </Card>
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
}

上传所有其他图片（长宽比除外），除了占位符图片
按下“旋转”按钮

谢谢！

使用CSS转换旋转时刷新CardMedia长宽比

0 个答案: