Question

我正在尝试使用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或HTMLImageElement或SVGImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap或OffscreenCanvas）类型的值'”

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

Answer 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;
  }

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

1 个答案: