裁剪的图像小于裁剪的图像React.js + react-image-crop

问题描述

我正在尝试在我的React.JS项目中实现react-image-crop。我有一个小问题：裁切后的图片与裁切后的尺寸不一样。.我在<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,percentCrop.height
    );
  };
}

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

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）