反应头像编辑器

Question

我有一个使用DropZone的反应组件。

行动是这样的：

1. 将图像添加到DropZone区域。
2. 使用PHP上传添加的图片，并将URL发送回下一步。
3. 此步骤显示React Avatar Editor，其中包含上传图像的URL。

我已经设置了像这样的头像区域/组件：

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}
/>

我需要什么（在拖动图像，缩放或旋转之后）是将画布中的图像发送到php脚本，然后保存。我知道怎么做，但我无法弄清楚如何通过画布访问图像“约束”？

我尝试过Avatar Editor的解决方案（在github上提到）。

this.editor.getImageScaledToCanvas().toDataURL('image/jpeg', 1);

和

this.editor.getImage();

但是使用axios和

let formData = new FormData();
formData.append('file', linkToCanvas);

不起作用。 （LinkToCanvas）应该是Avatar Canvas所拥有的图像。

图片上传后我也有以下问题（解决这个问题也让我解决了第一个问题，因为我知道所显示图像的方向）：

上传（4mb +）图像文件时，我会删除EXIF信息，保存图像并返回指向新图像的头像编辑器的URL。 如果图像是垂直的 - 阿凡达水平显示图像（即使从jpegs中删除EXIF信息）。有什么方法可以强制React将图像1对1加载，因为它存储在我的服务器上？

任何帮助都非常感谢，因为我一直在努力这一周： - （

我知道这是一个很长的问题。但我希望得到一个简短的答案。

由于

Answer 1

问题是编辑器没有添加到引用中。 要解决此问题，请在构造函数

之前声明编辑器

...
import AvatarEditor                         from 'react-avatar-editor';  

class YourClassName extends React.Component<any, any> {
    editor: AvatarEditor;
    constructor(props: Props) {
...

将setEditorFunction更改为此

setEditorRef = (editor: any) => {
     if (editor) {
        this.editor = editor;
        const img = this.editor.getImageScaledToCanvas().toDataURL();
        console.log(img);
    }
}

最后一步改变组件中的引用

<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

解决方法但可能不是Avatar Editor强制旋转jpgs的最佳解决方案。我用php来检测EXIF数据。如果需要，旋转。然后从jpg创建一个png。然后保存并取消链接“旧jpg”。最后将其位置返回到我的反应脚本。 这解决了旋转问题。所以现在我可以在画布上裁剪/旋转图像并使用

getCroppingRect()

我可以检索x，y，width和height并处理裁剪服务器端。最后使我能够存储作物区域。

然而，现在发出了一个新问题，因为编辑器围绕其画布中心旋转图像，所以即使我可以检索cropcript的坐标，以及旋转角度，它仍然放错位置，因为php的rotateimage旋转了图像中心。

任何人都知道如何在图像中心周围的画布上旋转图像？