reactjs - 裁剪的图像小于裁剪（Reactjs + react-image-crop）

Question

我正在尝试react-image-crop在我的 React.JS 项目中实现。我有一个小问题：我裁剪的图像与我的裁剪尺寸不同。我在我的<ReactCrop> 组件上使用以下功能：

handleImageLoaded = (image) => {
    //
  };

  handleOnCropChange = (percentCrop) => {
    this.setState({ crop: percentCrop });
  };

  handleOnCropComplete = (percentCrop) => {
    if (this.imageRef && percentCrop.width && percentCrop.height) {
      const canvasRef = this.imagePreviewCanvasRef.current;
      const { imgSrc } = this.state;

      image64toCanvasRef(canvasRef, imgSrc, percentCrop);
    }
  };

这是我的image64toCanvasRef功能：

export function image64toCanvasRef(canvasRef, image64, percentCrop) {
  const canvas = canvasRef; // document.createElement('canvas');
  canvas.width = percentCrop.width;
  canvas.height = percentCrop.height;

  const ctx = canvas.getContext('2d');
  const image = new Image();
  image.src = image64;

  image.onload = function () {
    ctx.drawImage(
      image,
      percentCrop.x,
      percentCrop.y,
      percentCrop.width,
      percentCrop.height,
      0,
      0,
      percentCrop.width,
      percentCrop.height
    );
  };
}

这是我上传图像并裁剪时的样子：

所以我的猜测是问题在于ctx.drawImage()

标签： reactjsreact-image-crop