Question

我有一个输入选项，现在我将其输入给Avatar编辑器进行编辑，但是下面给出了如何从此AvatarEditor.my代码中检索裁剪的图像。

           <div class="file-upload">
            <div class="file-select">
             <div class="file-select-button" id="fileName">Choose File</div>
             <div class="file-select-name" id="noFile">No file chosen...</div> 

                <input type="file" name="chooseFile" id="chooseFile" onChange={this.onSelectImage.bind(this)}/>
              </div>
            </div><br />
            <Button onClick={this.onAvatar.bind(this)}>crop</Button>
          <AvatarEditor
            image={this.state.selectImage}
            width={250}
            height={250}
            border={0}
            color={[255, 255, 255, 0.6]} // RGBA
            scale={1.2}
            rotate={0}
            Avatar Width={260}
            Avatar Height={260}
            ref={(ref) => this.setEditorRef(ref)}
          />

功能：-

  onSelectImage(e){
    e.preventDefault()
    this.setState({imageName:e.target.files[0].name})
    this.setState({selectImage:e.target.files[0]})
    this.forceUpdate()
      }
  setEditorRef = (editor) => {
    if (editor) {
       this.editor = editor;
       const img = this.editor.getImageScaledToCanvas().toDataURL();
       console.log(img);
   }
}

我已经尝试了很多，但是找不到。

预先感谢

Answer 1

您可以像这样从编辑器获取裁剪的图像

$text_cart_url = '<p style="color: #fff;">Booking Cart :</p>' . $this->M_perpus->edit_data(array('id_anggota'=>$this->session->userdata('id_agt')),'transaksi')->num_rows() .' Buku ';;

或者获取网址

const img = this.editor.getImageScaledToCanvas();

反应头像编辑器图像数据检索

1 个答案: