React 头像编辑器

Question

我有一个使用 DropZone 的 React 组件。

动作是这样的：

将图像添加到 DropZone 区域。
添加的图像使用 PHP 上传，URL 发送回下一步。
此步骤显示 React Avatar Editor 将 URL 保存到上传的图片。

我已经像这样设置头像 area/component:

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

我需要做的（在拖动、缩放或旋转图像之后）将 canvas 中的图像发送到 php 脚本，并保存它。我知道该怎么做，但我不知道如何通过 canvas?

访问图像 "constrained"

我已经尝试过 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 信息，保存图片，然后 returns 一个 URL 指向新图片的头像编辑器。如果图像是垂直的 - Avatar 水平显示图像（即使从 jpeg 中删除 EXIF 信息）。有什么方法可以强制 React 一对一地加载图像，因为它存储在我的服务器上？

非常感谢任何帮助，因为我已经为此苦苦挣扎了一个星期:-(

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

谢谢

Answer 1

一种解决方法，但可能不是头像编辑器强制旋转 jpg 的最佳解决方案。我使用 php 来检测 EXIF 数据。如果需要，请旋转。然后从jpg创建一个png。然后保存并取消链接“old jpg”。最后 return 它在我的反应脚本中的位置。这解决了旋转问题。所以现在我可以 crop/rotate canvas 上的图像并使用

getCroppingRect()

我可以检索 x、y、宽度和高度并在服务器端处理裁剪。最后使我能够存储裁剪区域。

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

有谁知道如何围绕图像中心在 canvas 上旋转图像？

Answer 2

问题是编辑器没有添加到参考文献中。要解决此问题，请在构造函数之前声明编辑器

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

React 头像编辑器

React Avatar Editor

reactjs

axios

不起作用。 (LinkToCanvas)应该是Avatar持有的头像Canvas.