React Avatar Editor - reactjs

Question

I have a react component which uses DropZone.
Actions are like this:
Add image to DropZone Area.
Image added is uploaded using PHP and a URL is sent back to next step.
This step show the React Avatar Editor holding the URL to the uploaded image.
I have set up the Avatar area/component like this:
setEditorRef = (editor) => this.editor = editor
<AvatarEditor
ref={this.setEditorRef}
image={this.state.image} // URL to uploaded image
scale={this.state.scale}
position={this.state.position}
onPositionChange={this.handlePositionChange}
style={{width: '310px', height: '263px'}}
border={10}
color={[255, 255, 255, 0.8]} // RGBA
rotate={this.state.rotate}
/>
What I need (AFTER dragging the image around, scaling it or rotating) is to send the image within the canvas to a php script, and save it. I know how to do this, but I cannot figure out how to access the image "constrained" by the canvas?
I've tried Avatar Editor's solutions (mentioned on the github).
this.editor.getImageScaledToCanvas().toDataURL('image/jpeg', 1);
and
this.editor.getImage();
But using axios and
let formData = new FormData();
formData.append('file', linkToCanvas);
does not work. (LinkToCanvas) should be the image held by the Avatar Canvas.
I also have the following issue after Image upload (solving this one enables me to solve the first issue as well, as I know the orientation of the image shown):
When uploading (4mb+) image files, I strip the EXIF information, save the image and returns a URL to Avatar Editor pointing to the new image.
If the image is vertical - Avatar shows the image horizontally (even when removing the EXIF info from the jpegs). Any way to force React to load an image 1-to-1, as it is stored on my server?
Any help is HIGHLY appreciated, as I've been struggling with this for a week now :-(
I know it's a long question. But I'm hoping for a short answer.
Thanks

Answer 1

The problem is that editor is not added to references.
To fix this, declare editor before constructor
...
import AvatarEditor from 'react-avatar-editor';
class YourClassName extends React.Component<any, any> {
editor: AvatarEditor;
constructor(props: Props) {
...
change setEditorFunction to this
setEditorRef = (editor: any) => {
if (editor) {
this.editor = editor;
const img = this.editor.getImageScaledToCanvas().toDataURL();
console.log(img);
}
}
And the last step change reference in component
<AvatarEditor
image={this.state.image}
width={this.state.width}
height={this.state.height}
color={[0, 0, 0, 0.6]}
scale={this.state.scale}
rotate={this.state.rotate}
position={this.state.position}
borderRadius={this.state.borderRadius}
ref={(ref) => this.setEditorRef(ref)}
onLoadSuccess={this.loadSuccess}
/>

Answer 2

A workaround but maybe not the best solution to Avatar Editor forcing rotate on jpgs. I use php to detect EXIF data. Rotate if this is needed. Then create a png from the jpg. Then save it and unlink “old jpg”. And finally return its location to my react script.
This solves the rotation problem. So now I can crop/rotate the image on the canvas and using the
getCroppingRect()
I can retrieve x, y, width and height and handle crop serverside. Finally enabling me to store the crop area.
However a new problem is now issued, as the editor rotates the image around its canvas center, so even if I can retrieve coordinates for the cropscript, as well as the rotation angle, its still misplaced, as php’s rotateimage rotates on the image center.
Anyone know how to rotate an image on a canvas around the image center?