通过 react-image-crop 模块获取裁剪后的图像答案

【问题标题】：Get cropped image through react-image-crop module通过 react-image-crop 模块获取裁剪后的图像
【发布时间】：2019-08-30 22:17:42
【问题描述】：

我正在尝试使用 react-image-crop 模块 (blob) 获取裁剪后的图像。但是我对画布有问题，我想它需要异步完成，但我不确定，我也不确定我是否选择了正确的方法。

我已经尝试做与https://www.npmjs.com/package/react-image-crop 中的 react-image-crop 文档中所写相同的操作。在本主题中，我也尝试与 Stefan 做同样的事情： Get cropped image via react-image-crop module

state = {
        image: '',
        crop: {
            aspect: 4/3,
            x: 10,
            y: 10,
            width: 80,
            height: 80,
           },
        imgSrc: null
    }

    getCroppedImg = (image, pixelCrop, fileName) => {

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

        ctx.drawImage(
          image,
          pixelCrop.x,
          pixelCrop.y,
          pixelCrop.width,
          pixelCrop.height,
          0,
          0,
          pixelCrop.width,
          pixelCrop.height
        );

        // As a blob
        return new Promise((resolve, reject) => {
          canvas.toBlob(blob => {
            blob.name = fileName;
            resolve(blob);
          }, 'image/jpeg');
        });
      }

    handleImageUpload = e => {
        const uploadData = new FormData();
        uploadData.append("image", this.state.imgSrc);

        service.handleUpload(uploadData)
            .then(response => {
            this.setState({ image: response.secure_url });
            })
            .catch(err => {
            console.log("Error while uploading the file: ", err);
            });
    }

    handleImagePreview = e => {
        this.setState({image: URL.createObjectURL(e.target.files[0]), imgSrc: e.target.files[0]})
    }

    handleOnCropComplete = (crop, pixelCrop) => {
        this.getCroppedImg(this.state.imgSrc, pixelCrop, 'preview.jpg')
        .then((res) => {
            const blobUrl = URL.createObjectURL(res);
            console.log(blobUrl);
        })

    }
render() {
        return(
            <>
                <input required onChange={this.handleImagePreview} type="file" />                 
                <div className="crop-div">
                                <ReactCrop 
                                    src={this.state.image} 
                                    crop={this.state.crop} 
                                    onChange={this.handleOnCropChange}
                                    onComplete={this.handleOnCropComplete} />
                                <button className="submit-btn" onClick={this.handleImageUpload}>Crop the image</button>
                            </div>
            </>
        )
    }

调整图像上裁剪区域的大小后，我会收到此错误：

“TypeError: 无法在 'CanvasRenderingContext2D' 上执行 'drawImage': 提供的值不是类型 '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'”

我传递的图像是图像文件对象。

【问题讨论】：

标签： javascript reactjs blob crop

【解决方案1】：

文件对象不在错误消息所述的预期列表中，因此您必须根据您拥有的对象在列表中创建一个对象。
在这种情况下，我们将使用 HTMLImageElement。

getCroppedImg = (imageFile, pixelCrop, fileName) => {

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

    var image = new Image();
    var promise = new Promise((resolve, reject) => {
      image.onload = function(){ 

        ctx.drawImage(
          image,
          pixelCrop.x,
          pixelCrop.y,
          pixelCrop.width,
          pixelCrop.height,
          0,
          0,
          pixelCrop.width,
          pixelCrop.height
        );
        resolve();
      };
      image.src = URL.createObjectURL(imageFile);
    }).then(function(){
      return new Promise((resolve, reject) => {
        canvas.toBlob(blob => {
          blob.name = fileName;
          resolve(blob);
        }, 'image/jpeg');
      });  
    });
    return promise;
  }

【讨论】：