Question

我正在使用图片裁剪器库来裁剪图像。我想使用我编写的函数上传裁剪的图像。问题是图像裁剪器将裁剪后的图像返回为HTMLCanvasElement。我想将其转换为object以在我的函数中使用。我已经尝试将使用FileReader拍摄的图像文件传递给我的函数并且它工作正常。我正面临的问题是在尝试传递裁剪后的图像时，这是一个HTMLCanvasElement。我该如何解决这个问题？

这是我正在使用的裁剪库

https://github.com/mosch/react-avatar-editor

这是我获得裁剪图像的功能。

handleSave = () => {

    const img = this.editor.getImage();

    console.log("Type of image "+typeof img);

    this.props.croppedImage(img);


}

在我的第二个组件中，我正在访问croppedImage函数

<CropperTest croppedImage={this.getCroppedImg}/>

getCroppedImg函数

  getCroppedImg(img) {

        console.log("typeofNEW"+typeof event,img);

        this.props.onImageImgPoll(img);

    }

从这里开始，我将裁剪后的图像传递给另一个组件中名为onImageImgPoll的函数

  onImageImgPoll(event) {

        this.setState({

            croppedImage:event

        })

        let array = this.state.filepoll.slice();
        let unq_file = event;

            let reader = new FileReader();
            reader.onloadend = (e) => {

                array.push(unq_file);
            };


    }

我传递给数组的文件应该使用其他功能上传。但在这种情况下，它不会发生，因为传递的图像是HTMLCanvasElement的形式。我该如何解决这个问题？

Answer 1

您可以将其另存为数据网址，然后在其他功能中再次使用它。顺便说一句。你无法通过javascript上传。您可以通过ajax（base64字符串）使用此函数执行此操作，然后通过php上传它。

canvas.toDataURL();

将HTMLCanvasElement转换为对象

1 个答案: