1

对于 Microsoft Azure Cognitive Services API，图像需要以这种格式传递

在 POST 正文中传递的输入。支持的输入法：原始图像二进制。

因此，我对如何将用户上传的图像转换为该格式并发出 API 请求感到非常迷茫。我在前端使用 ReactJS 和 NodeJs 后端。有人可以帮我获取正确格式的图像吗？我不确定是否必须将其作为数组缓冲区读取？

import React, { Component } from 'react';
import Button from 'react-bootstrap/Button';

class Dashboard extends Component {
    constructor(props) {
        super(props);
        this.state ={
          file: null
        }
    }

    onSubmit = () => {
        console.log(this.state.file);
        // console.log(window.atob(this.state.file));
    }

    onChange = (e) => {
        const file = e.target.files[0];
        const reader = new FileReader()
        reader.addEventListener("load", () => {
            // convert image file to base64 string
            console.log(reader);
            // if (reader.result.includes("data:image/png;base64,")) {
            //     img = reader.result.replace("data:image/png;base64,", "");
            // } else { 
            //     img = reader.result.replace("data:image/jpeg;base64,", ""); 
            // }
            //this.setState({file: img});
          }, false);

        if (file) {
            reader.readAsArrayBuffer(file);
        }
        
    }

    render() {
        return(
            <div>
                <h3 style={{padding: '20px', textAlign: 'center', color: 'white', fontWeight: '100'}}>
                    Customize your playlist based on your mood!
                </h3>
                <h5 style={{margin: '30px', padding: '0px',textAlign: 'center', color: 'grey', display:'block'}}>
                    Click a picture of your surroundings or simply upload one based on what you're currently in the mood for and 
                    <br />
                    <br />
                    TuneIn will add a playlist according to your liking!
                </h5>
                <form onSubmit={this.onSubmit}>
                    <h1>File Upload</h1>
                    <input type="file" accept="image/png, image/jpeg" onChange={this.onChange}/>
                    <button type="submit">Upload</button>
                </form>
            </div>
        );
    }
}

export default Dashboard;
4

1 回答 1

0

Here is the sample for Analyzing a local image using the Computer Vision REST API and javascript.

https://github.com/Azure-Samples/cognitive-services-quickstart-code/blob/master/javascript/ComputerVision/ComputerVisionQuickstart.js

于 2020-08-03T14:53:50.813 回答