JavaScript face++ 人体识别API 与人体抠像功能（二）

最新推荐文章于 2025-05-19 10:28:52 发布

最新推荐文章于 2025-05-19 10:28:52 发布 · 2.8k 阅读

一些学习的研究同时被 2 个专栏收录

45 篇文章

订阅专栏

新手入门

23 篇文章

订阅专栏

本文介绍了一种利用Face++ API实现人体图像抠图的方法。文章详细阐述了如何通过JavaScript操作DOM元素来保存和上传图片，并利用Face++ API进行人体分割，最后展示了如何处理图像数据以实现人体抠图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

#保存图片

  saveImage =document.getElementById('save');
  saveImage.addEventListener('click',function () {
        alert("1");
        var mycan = document.getElementById("testImg");
        var image = mycan.toDataURL("image/png");

        window.location.href = image ;//保存到本地 不过需要自己手动修改后缀名

    },false );//上传的点击事件

#上传图片


    upload = document.getElementById("upload");
    upload.addEventListener('click',function () {
        let data = new FormData();//传给face++的数据
        let files = $('#testImg');//上传文件的数据
        var imagefiles =files.toDataURL("image/png");//转换格式
        let url = 'https://api-cn.faceplusplus.com/humanbodypp/v1/segment';//调用的api网页
        data.append('api_key', "qe8LFyw4tDiz50wdhWMT8vzz0hz3uG5o");//申请的face++的api账号
        data.append('api_secret', "1A1NxBWXLrk_ArS2lULqm4kz8UztBVt6");//申请的face++的api密码
        data.append('image_file', imagefiles);//图片数据
        //这里用到的是jQuery的库的发送请求的函数
        $.ajax({ url: url, type: 'POST',
            data: data, cache: false, processData: false, contentType: false,
            success(data)//调用成功后执行的函数
            {
                faceConfig.face_token = data.files[0].face_token;//我用一个变量保存传回来的灰度图的数据

            },
            error(e){
            //失败的时候调用的函数
            alert(JSON.stringify(e));
            }
        })

    },false);

#图片处理

canvas提供了一个获得图片的数据的方法
canvas.getImageData(0,0,x,y);
通过这个函数获得灰度图的数据，然后将获得的数据再与原图进行比较、修改，就可以扣除人体。
canvas提供了一个可以修改原图通明度的函数
调用了**canvas.getImageData(0,0,x,y);**之后会返回一个data，通过修改该数据
#效果
完整的代码我会上传的github
下载地址
https://github.com/GDUT-Rex/use-api-of-face-to-the-human-body-keyer/tree/master