主页 / 问题 / 881754
Accepted
Suvitruf - Andrei Apanasik
Asked:2020-09-16 05:09:22 +0000 UTC2020-09-16 05:09:22 +0000 UTC

使用 React Avatar Editor，得到一张圆形图片，发送到服务器并保存在那里

  • 772

反应头像编辑器。

我举个例子：

<Dropzone
    onDrop={this.handleDrop}
    disableClick
    style={{ width: '250px', height: '250px' }}>
    <AvatarEditor
        ref={this.refAvatar}
        image={this.state.image}
        borderRadius={125}
        width={250}
        height={250}
        border={0}
        scale={1}
    />
</Dropzone>

一切在编辑器中看起来都是正确的：

在此处输入图像描述

治疗：

handleDrop = dropped => {
    this.setState({ image: dropped[0] })
};

onClickSave = () => {
    // This returns a HTMLCanvasElement, it can be made into a data URL or a blob,
    // drawn on another canvas, or added to the DOM.
    const canvas = this.refAvatar.current.getImage();

    // If you want the image resized to the canvas size (also a HTMLCanvasElement)
    const canvasScaled = this.refAvatar.current.getImageScaledToCanvas();
    const img = canvasScaled.toDataURL();
    const rect = this.refAvatar.current.getCroppingRect();
};

结果，有canvasScaled（这里是裁剪的方形图片）和rect。

以及如何获得圆形图片？在他们的预览演示中，圆度是使用 css: 实现的border-radius: 52.5px;。它不会帮助我获得一张圆形图片并将其发送到服务器。

javascript

1 个回答

  1. Best Answer

    1. 创造了一个隐形的canvas。

      <canvas style={{display: "none"}}
    ref={this.refCanvas}
    width={250}
    height={250}
/>
    2. 我在其中绘制了一个裁剪的方形图像。
    3. 我裁剪了圆圈外的所有内容。
    4. 我得到最终的图像。

    5. 我发送到服务器。

    现在处理是：

    onClickSave = () => {
    const canvasScaled = this.refAvatar.current.getImageScaledToCanvas();
    const img = canvasScaled.toDataURL();
    const rect = this.refAvatar.current.getCroppingRect();

    this.drawPreview(img, rect);
};

drawPreview = (img, rect) => {
    const image = new Image();
    image.src = img;
    image.onload = _ => {this.handleImageLoad(image)};
};


handleImageLoad = (image) => {
    const ctx = this.refCanvas.current.getContext('2d');
    const width = 250;
    const height = 250;
    ctx.clearRect(0, 0, width, height);

    ctx.arc(125,125, 125, 0, Math.PI*2,true);
    ctx.clip();

    ctx.drawImage(image, 0, 0, width, height);

    axios.post('http://localhost:8081/upload', {img: this.refCanvas.current.toDataURL()}, {
        'Accept': 'application/json'
    }).then((response) => {
        console.log(response);
    })
        .catch(err => {
            console.log(err);
        });
};

    在服务器上，处理是微不足道的，有快递：

    app.post('/upload', (req, res) => {
    const data = req.body.img.replace(/^data:image\/\w+;base64,/, "");
    const buf = new Buffer(data, 'base64');
    fs.writeFile(__dirname + '/../public/image.png', buf);
});

    图片是圆形的：

    在此处输入图像描述

    • 0

相关问题