javascript - 如何将base 64图像转换为react-avatar-editor中的对象(how to convert base 64 image to object in react-avatar-editor)

Question

npm packages used

(使用的npm软件包)

import AvatarEditor from "react-avatar-editor";
import Dropzone from "react-dropzone";

step-1 select image using dropzone

(步骤1使用dropzone选择图像)

<Dropzone
             onDrop={(acceptedFiles)=>this.setState({ image: acceptedFiles[0]}
/>

step-2 to implement corpping functionallity

(步骤2实现整合功能)

onCrop = () => {
    if (this.editor !== null) {
      const url = this.editor.getImageScaledToCanvas().toDataURL();
}
 <AvatarEditor
                  scale={parseFloat(scale)}
/>
  <input
              type="range"
              value={scale}
              name="points"
              min="1"
              max="10"
              onChange={this.handleScale}
              step="0.1"
            />
            <button onClick={this.onCrop} type="button">
              Crop
            </button>

expected result - after cropping, result should be in following Format which i get after selecting from dropzone

(预期结果-裁剪后，结果应采用以下格式，即从dropzone中选择后得到的格式)

FileList:{
0:{
     lastModified:212123244,
     lastModifiedDate:Tue Oct 15....,
     name:"phase-13.jpg",
     size:2134354546,
     type:"image/jpeg",,
     webkitRelativePath:"",
  },
}

actual result - data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgMAAAEsCAYAAABeybApAAAgAElEQVR4XuxdB3gUVdd+Z7amUELvvVfp2P2wC3Y/K4KKooIKKAgCUlSqRFFEQKo/ShHFhp8UAcEOiiCgFEEp0hESUnd3dv7nnDt3M4SEZEOyCeQOxt1MZm45t5z3nqolJ6eYUFehUIAIb5omNE3jT7rWfvMN4uJKo327dtB1ne+JZ+gb/++sFz27bPlyeD1edOzYEcFgMBdv5VTqhf/3vfv2onfvp/DN2rUIBAIoVbo0Rr3yCu5/4H543B4YhgGHwxEajwufIrKHPEutH3mP5qF9Lop5evoVLD4kysee0pqnuUZ7gt/v55K9Xi+cTid8Pl9on6D7tLbponkp9498bI

(实际结果 - 数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAgMAAAEsCAYAAABeybApAAAgAElEQVR4XuxdB3gUVdd + Z7amUELvvVfp2P2wC3Y / K4KKooIKKAgCUlSqRFFEQKo / ShHFhp8UAcEOiiCgFEEp0hESUnd3dv7nnDt3M4SEZEOyCeQOxt1MZm45t5z3nqolJ6eYUFehUIAIb5omNE3jT7rWfvMN4uJKo327dtB1ne + JZ + GB / ++ sFz27bPlyeD1edOzYEcFgMBdv5VTqhf / 3vfv2onfvp / DN2rUIBAIoVbo0Rr3yCu5 / 4H543B4YhgGHwxEajwufIrKHPEutH3mP5qF9Lop5evoVLD4kysee0pqnuUZ7gt / v55K9Xi + cTid8Pl9on6D7tLbponkp9498bI)

  ask by ketan kulkarni translate from so

Answer 1

等待大神答复