如何在 React 中将裁剪参数设置为原始图像？

Question

我正在尝试在通过 API 上传图像之前对其进行裁剪。我正在展示一个模式 (Dialog) 来执行此操作，并使用此库 react-image-crop 来实现此目的。

这里是sn-p的代码：

showCropImageModal() {
    const actions = [
        <FlatButton
          label="Cancel"
          primary={true}
          onClick={this.handleCancel}
        />,
        <FlatButton
          label="Crop"
          primary={true}
          keyboardFocused={true}
          onClick={this.handleCropClose}
        />,
    ];
    
    if (this.state.showImageCropper) {
        return (
            <div>
                <Dialog
                    title="Crop the image"
                    actions={actions}
                    modal={true}
                    open={this.state.showImageCropper}
                    autoScrollBodyContent={true}
                >
                    <ReactCrop
                        src={this.state.selectedImageURL} 
                        crop={this.state.crop}
                        onComplete={(crop, pixel) => {console.log(crop, pixel)}}
                        onChange={(crop) => { console.log(crop); this.setState({crop}); }}
                    />
                </Dialog>

            </div>
        );
    }
}

关于“裁剪”操作，我使用handleCropClose 函数处理它：

handleCropClose(){
    let {selectedFile, crop} = this.state
    const croppedImg = this.getCroppedImg(selectedFile, crop.width, crop.height, crop.x, crop.y, 2);
    console.log(croppedImg)
    this.setState({showImageCropper: false})
}

这里是getCroppedImg 代码：

getCroppedImg(imgObj, newWidth, newHeight, startX, startY, ratio) {
    /* the parameters: - the image element - the new width - the new height - the x point we start taking pixels - the y point we start taking pixels - the ratio */
    // Set up canvas for thumbnail
    console.log(imgObj)
    var img = new Image();
    img.src = this.state.selectedImageURL;
    var tnCanvas = this.refs.canvas;
    tnCanvas.width = newWidth;
    tnCanvas.height = newHeight;
    tnCanvas.getContext('2d').drawImage(img, startX, startY, newWidth, newHeight);
    return tnCanvas.toDataURL("image/png");
}

现在，我无法获得正确的预览或新的图像文件对象，因此我可以使用它在模态本身中显示为预览，而不是使用它来上传它。我什至没有得到正确的图像比例。有什么帮助吗？

图片如下：

Answer 1

解决方案：

首先，使用像素坐标： - 更改：onChange={(crop) => { console.log(crop); this.setState({crop}); }} - 到onChange={(crop, pixelCrop) => { console.log(crop); this.setState({crop, pixelCrop}); }}。

使用this.state.pixelCrop 代替this.state.crop 代替getCroppedImg。

然后，更新getCroppedImg 以使用 Promise 异步获取图像并对其进行裁剪。

getCroppedImg(imgObj, newWidth, newHeight, startX, startY, ratio) {
    /* the parameters: - the image element - the new width - the new height - the x point we start taking pixels - the y point we start taking pixels - the ratio */
    return new Promise((resolve, reject) => {
      const img = new Image();

      img.onload = resolve;
      img.onerror = reject;
      img.src = this.state.selectedImageURL;
    }).then(img => {
      // Set up canvas for thumbnail
      var tnCanvas = this.refs.canvas;

      tnCanvas.width = newWidth;
      tnCanvas.height = newHeight;
      tnCanvas
        .getContext('2d')
        .drawImage(
          img,
          startX, startY, newWidth, newHeight,
          0, 0, newWidth, newHeight
        );

      return tnCanvas.toDataURL("image/png");
    });
}

解释：

您缺少drawImage 的参数。您要求画布在位置(startX, startY) 绘制图像并将其缩放到(newWidth, newHeight)。

要裁剪您需要的图像additional parameters：

drawImage(
    image,
    sx, sy, sw, sh,
    dx, dy, dw, dh
);

地点：

示例：

const img = new Image()
const canvas = document.createElement('canvas')

img.src = 'https://cmeimg-a.akamaihd.net/640/clsd/getty/991dda07ecb947f1834bf1aa89153cf6'

const newWidth = 200
const newHeight = 200

const startX = 200
const startY = 100

img.onload = () => {
    canvas.width = newWidth;
    canvas.height = newHeight;
    canvas.getContext('2d').drawImage(img, startX, startY, newWidth, newHeight, 0, 0, newWidth, newHeight);
}


document.body.appendChild(canvas)
document.body.appendChild(img)

Answer 2

react-image-crop 使用百分比进行缩放，请务必计算。还要确保在动态创建新对象图像以渲染虚拟 dom。

在这里，试试这个：

import React, { Component } from 'react';
import ReactCrop, { makeAspectCrop } from 'react-image-crop';
import { FlatButton, Dialog } from 'material-ui';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import sample from './sample.png';
import 'react-image-crop/dist/ReactCrop.css';

class App extends Component {
  state = {
    showImageCropper: false,
    selectedImageURL: sample,
    crop: {
      x: 0,
      y: 0,
      // aspect: 16 / 9,
    },
    selectedFile: null,
    croppedImage: sample
  };

  showCropImageModal() {
    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onClick={this.handleCancel}
      />,
      <FlatButton
        label="Crop"
        primary={true}
        keyboardFocused={true}
        onClick={this.handleCropClose}
      />,
    ];

    if (this.state.showImageCropper) {
      return (
        <div>
          <Dialog
            title="Crop the image"
            actions={actions}
            modal={true}
            open={this.state.showImageCropper}
            autoScrollBodyContent={true}
          >
            <ReactCrop
              src={this.state.selectedImageURL}
              crop={this.state.crop}
              // onImageLoaded={this.onImageLoaded}
              onComplete={this.onCropComplete}
              onChange={this.onCropChange}
            />
          </Dialog>

        </div>
      );
    }
  }

  onCropComplete = (crop, pixels) => {
  }

  onCropChange = (crop) => {
    this.setState({ crop });
  }

  // onImageLoaded = (image) => {
  //   this.setState({
  //     crop: makeAspectCrop({
  //       x: 0,
  //       y: 0,
  //       // aspect: 10 / 4,
  //       // width: 50,
  //     }, image.naturalWidth / image.naturalHeight),
  //     image,
  //   });
  // }

  handleCancel = () => {
    this.setState({ showImageCropper: false });
  }

  handleCropClose = () => {
    let { crop } = this.state;

    // console.log("selectedFile", selectedFile);
    // console.log("crop",crop);

    const croppedImg = this.getCroppedImg(this.refImageCrop, crop);
    this.setState({ showImageCropper: false, croppedImage: croppedImg })
  }

  getCroppedImg(srcImage,pixelCrop) {
    /* the parameters: - the image element - the new width - the new height - the x point we start taking pixels - the y point we start taking pixels - the ratio */
    // Set up canvas for thumbnail
    // console.log(imgObj);
    // let img = new Image();
    // img.src = this.state.selectedImageURL;
    // let tempCanvas = document.createElement('canvas');
    // let tnCanvas = tempCanvas;
    // tnCanvas.width = newWidth;
    // tnCanvas.height = newHeight;
    // tnCanvas.getContext('2d').drawImage(img, startX, startY, newWidth, newHeight);
    // return tnCanvas;

    let img = new Image();
    img.src = this.state.selectedImageURL;
    const targetX = srcImage.width * pixelCrop.x / 100;
    const targetY = srcImage.height * pixelCrop.y / 100;
    const targetWidth = srcImage.width * pixelCrop.width / 100;
    const targetHeight = srcImage.height * pixelCrop.height / 100;

    const canvas = document.createElement('canvas');
    canvas.width = targetWidth;
    canvas.height = targetHeight;
    const ctx = canvas.getContext('2d');

    ctx.drawImage(
      img,
      targetX,
      targetY,
      targetWidth,
      targetHeight,
      0,
      0,
      targetWidth,
      targetHeight
    );

    return canvas.toDataURL('image/jpeg');
  }

  handleOpen = () => {
    this.setState({ showImageCropper: true });
  }

  render() {
    return (
      <MuiThemeProvider>
        <div className="App">
        { this.showCropImageModal() }
          <img src={this.state.selectedImageURL} style={{display: "none"}} ref={(img) => {this.refImageCrop = img}} alt="" />
          <img src={this.state.croppedImage} alt="" />
          <FlatButton
            label="Open popup"
            primary={true}
            onClick={this.handleOpen}
          />
        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;