HTMLCanvasElement를 객체로 변환

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); 


} 

은 난이다 onImageImgPoll라는 함수로 자른 이미지를 통과하고있어 여기에서

<CropperTest croppedImage={this.getCroppedImg}/> 

getCroppedImg 기능

getCroppedImg(img) { 

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

     this.props.onImageImgPoll(img); 

    } 

croppedImage 기능에 액세스있어 다른 구성 요소에서

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

데이터 URL로 저장 한 다음 다른 기능에서 다시 사용할 수 있습니다. Btw. 자바 스크립트로 업로드 할 수 없습니다. 이 함수는 ajax (base64 문자열)를 통해 수행 할 수 있으며 PHP로 업로드 할 수 있습니다.

canvas.toDataURL();