纯前端实现人体抠图背景融合-调用Face++抠像接口API实现人像抠图

背景

H5项目需求，用户上传半身照，程序抠出人像，跟指定背景融合成一张海报。

 

解决方法

目前市面上只查到face++有这种 抠图接口。

调用URL：

https://api-cn.faceplusplus.com/humanbodypp/v2/segment

调用方法：

POST

请求参数：

是否必选	参数名	类型	参数说明
...	...	...	...
必选（三选一）	image_url ...	String ...	图片的 URL ...

 

 

 

 

返回值说明：

字段	类型	说明
...	...	...
body_image	String	一个通过base64 编码的图片文件。解码后文件为抠出人像的图片，背景为透明色。图片大小与原图一致。

 

 

 

 

关键代码：

        var postData = 'api_key=xxx&api_secret=xxx'
                    + '&image_url=http://xxx.com/xxx.jpg';
 
        $.ajax({
            dataType: 'json', 
            type: 'POST' ,
            url: 'https://api-cn.faceplusplus.com/humanbodypp/v2/segment',
            data: postData,
            success: function(response){ 
                if(typeof(response.error_message) == "undefined"){
                    // todo: 在这里添加生成后的逻辑，response.result 为生成图的base64编码
                    $('.uploadpic').attr('src', 'data:image/jpg/png;base64,' + response.result); 
                }else{
                    // todo: 在这里添加上传失败的逻辑
                    alert('请重新上传照片');
                } 
            },
            error: function(xhr, status, error){
                console.log(xhr.responseText);
                // todo: 在这里添加上传失败的逻辑
                alert('请重新上传照片');
            }
        });

 

Demo二维码

 

参考链接

人体抠像：https://www.faceplusplus.com.cn/body-outlining

人体抠像API文档：https://console.faceplusplus.com.cn/documents/40608240