JavaScript face++ 人体识别API 与 人体抠像功能(二)

文章目录


#保存图片

  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,通过修改该数据
    #效果
    JavaScript face++ 人体识别API 与 人体抠像功能(二)_第1张图片
  • 完整的代码我会上传的github
  • 下载地址
    https://github.com/GDUT-Rex/use-api-of-face-to-the-human-body-keyer/tree/master

你可能感兴趣的:(一些学习的研究,新手入门)