人体分析之人像分割在vue项目中使用

最新推荐文章于 2024-09-20 13:42:36 发布

nbsp383

最新推荐文章于 2024-09-20 13:42:36 发布

阅读量606

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_65243943/article/details/126062037

版权

本文介绍了一个Vue.js应用中如何调用百度的人像分割API。首先获取access_token，然后在组件中处理图片转base64，并通过自定义事件传递给父组件。父组件利用access_token和base64编码的图片数据，调用人像分割接口，得到结果并展示。

摘要由CSDN通过智能技术生成

1.首先要获取access_token；

2.得到access_token之后，这个access_token是为了请求百度人像分割接口时候需要的;

<template>
    <div>
        <h2>百度Api人像分割</h2>
        <hr>
        <Base64View @sendBase64="sendBase64" />
        <img :src="result" alt="" width="200">
        <span v-show="flag" style="color:red">请稍等~~~~~~~~~~~~~~~~</span>
    </div>
</template>

<script>
import qs from "qs";
import Base64View from "../components/Base64View.vue";
export default {
    components: {
        Base64View
    },
    data() {
        return {
            info: 12312,
            access_token: "",
            image: "",
            result: "",
            flag: false
        }
    },
    created() {

        this.$Axios.post("/api/oauth/2.0/token", qs.stringify({
            grant_type: "client_credentials",
            client_id: "xxxx",
            client_secret: "xxxx"
        })).then((res) => {
            console.log(res);
            this.access_token = res.data.access_token
        })
    },
    methods: {
        sendBase64(val) {
            this.flag = true;
            console.log(this.access_token);
            this.image = encodeURI(val)
            this.$Axios.post("/aa/rest/2.0/image-classify/v1/body_seg?access_token=" + this.access_token,
                qs.stringify({
                    image: this.image
                })
            ).then(res => {
                this.flag = false;
                console.log(res.data.foreground);
                this.result = "data:image/png;base64," + encodeURIComponent(res.data.foreground)
            })
        }
    }

}
</script>

<style>
</style>

3.因为人像分割接口的参数需要image作为参数，

4.按着要求需要把图片转成base64然后在urlencode,所以写了一个图片转base64的组件，如下

<template>
    <div>
        <input type="file" :value="fileValue" id="upImageFile" @change="ImageToBase64">
        <img :src="iconBase64" alt="" width="200" />
    </div>
</template>
 
<script>
export default {
    data() {
        return {
            fileValue: "",
            iconBase64: ""
        }
    },
    methods: {
        //将本地图片转化为Base64
        ImageToBase64() {
            let files = document.getElementById('upImageFile').files[0];
            var reader = new FileReader()
            reader.readAsDataURL(files)
            reader.onload = () => {
                console.log('图片转base64结果:' + reader.result)
                this.iconBase64 = reader.result;
                this.$emit("sendBase64", this.iconBase64);
            }
            reader.onerror = function (error) {
                console.log('Error: ', error)
            }
        }
    }
}
</script>

5.通过自定义事件把base64传给父组件，父组件中当请求的参数使用；

6.最后得到请求结果直接使用即可