AI战疫【百度大脑新品体验】AI小程序之动漫头像
wangwei8638 发布于2020-05 浏览:5079 回复:2
0
收藏

       上传真实头像容易泄露个人隐私?有没有既不泄露隐私又显个性化的好办法。百度新出的人像动漫化技术,能为用户量身定制千人千面的二次元动漫形象,只需上传个人头像照片,一键转换动漫形象。效果图如下:

     想了解AI开放平台API的调用过程,请参看我之前的帖子:《车牌识别》https://ai.baidu.com/forum/topic/show/943028

     想了解微信小程序的开发过程,请参看我之前的帖子:《UNIT接入小程序》https://ai.baidu.com/forum/topic/show/953022

     下面简要介绍人像动漫化的小程序功能实现。

1 系统框架

用到的技术主要有:百度人像动漫化技术和微信小程序。小程序将人像图片提交给百度人像动漫化服务,返回二次元动漫形象。全部功能都在小程序客户端完成,不需要服务器,适合个人开发者学习调试使用,同时也为商业应用提供相应解决方案。

2 创建小程序项目

在根目录的全局配置文件app.json中增加:"pages/ anime/ anime" ,会自动创建相关页面文件,结构如下:

anime.js:功能逻辑模块

anime.wxss:页面样式文件

anime.wxml:页面布局文件

anime.json:页面配置文件

3 调用地址识别API

3.1 首先要在控制台创建应用,调用地址识别API,“获取API Key/Secret Key”。

接口文档地址:https://ai.baidu.com/ai-doc/IMAGEPROCESS/Mk4i6olx5

请求URL: https://aip.baidubce.com/rest/2.0/image-process/v1/selfie_anime

Body中放置请求参数,参数详情如下:

返回参数:

3.2 地址识别功能实现

(1)发送URL请求核心代码

//在baiduai.js中发送URL请求,并进行封装。

//图像动漫化API  图片base64

let anime_transUrl = 'https://aip.baidubce.com/rest/2.0/image-process/v1/selfie_anime';

let anime_transRequest = (base64Img, callback) => {

  var accessToken = app.globalData.access_token;

  console.log(accessToken);

  let params = {

    image: base64Img

  }

  //发送接口请求

  wx.request({

    url: anime_transUrl + '?access_token=' + accessToken,

    data: params,

    header: {

      'content-type': 'application/x-www-form-urlencoded'

    },

    method: 'POST',

    success: function (res) {

      callback.success(res.data)

    },

    fail: function (res) {

      if (callback.fail)

        callback.fail()

    }

  })

}



//暴露出去的接口

module.exports = {

anime_transRequest : anime_transRequest,

 }

(2)定义按钮点击事件

//在anime.js中定义定义按钮点击事件

//按钮点击事件

  uploads: function () {

    var that = this

    wx.chooseImage({

      count: 1, // 默认9

      sizeType: ['compressed'],

      sourceType: ['album', 'camera'],

      success: function (res) {

        if (res.tempFiles[0].size > 4096 * 1024) {

          wx.showToast({

            title: '图片文件过大',

            icon: 'none',

            mask: true,

            duration: 1500

          })

        } else {

          that.setData({

            img: res.tempFilePaths[0]



          })

          console.log(that.data.img);

        }

        wx.showLoading({

          title: "分析中...",

          mask: true

        })

        //根据上传的图片读取图片的base64

        var fs = wx.getFileSystemManager();

        fs.readFile({

          filePath: res.tempFilePaths[0].toString(),

          encoding: 'base64',

          success(res) {

            //获取到图片的base64 进行请求接口

            api.anime_transRequest(res.data, {

              success(res) {

                //console.log(res);

                var data = res.image;

                if (data != '') {

                  wx.hideLoading();



                  that.setData({

                    img2: 'data:image/jpg;base64,' + data

                  })

                  //console.log(that.data.img2);

                } else {

                  wx.hideLoading();

                  wx.showModal({

                    showCancel: false,

                    title: '温馨提示',

                    content: '貌似没有识别出结果'

                  })

                }

              }

            })

          }

        })

      },

    })

  },

 (3)修改页面样式文件

/* pages/anime/anime.wxss */

.image {

  width: 100%;

  height: 560rpx;

}

.container {

  margin-top: -110px;

  background-repeat: no-repeat;

  background-size: auto;

  background-position: bottom;

  background-position-x: right;

}



button {

  font-family: 微软雅黑;

}

.baikeform{

  font-size: 20rpx;

  color: #c0c0c0;

  border-top: 1rpx solid #eeeeee;

  margin:30rpx 40rpx 0rpx 40rpx;

  padding: 20rpx;

}



.page-body-info {

  display: flex;

  box-sizing: border-box;

  padding: 30rpx;

  height: 420rpx;

  border-top: 1rpx solid #d9d9d9;

  border-bottom: 1rpx solid #d9d9d9;

  align-items: center;

  justify-content: center;

}



.up {

  color: rgb(255, 255, 255);

  font-size: 20px;

  font-family: 微软雅黑;

  width: 100%;

  height: 50px;

  vertical-align: middle;

  text-align: center;

  line-height: 45px;

  border-radius: 5px;

  background-color: rgb(128, 207, 247);

}

.img_wrap {

    margin-bottom: 10px;

    width: 750rpx;

    height: 500rpx;

    background: #ececec;

}

image {

    width: 100%;

    height: 100%;

    max-height: 1

}

.msg {

    margin: 10px 0;

    text-align: center;

}

.table {

  margin-top: 10rpx;

  border: 0px solid darkgray;

  width: 100%;

}

.tr {

  display: flex;

  width: 100%;

  justify-content: center;

  height: 80rpx;



}

.td {

  font-family: 微软雅黑;

    font-size: 28rpx;

    width:100%;

    display: flex;

    justify-content: center;

    text-align: center;

    align-items: center;

}

.bg-g{

  background: white;

}

.baikeform{

  font-size: 20rpx;

  color: #c0c0c0;

  border-top: 1rpx solid #eeeeee;

  margin:30rpx 40rpx 0rpx 40rpx;

  padding: 20rpx;

}

.th {

  font-size: 28rpx;

  width: 48%;

  justify-content: center;

  background: #3366FF;

  color: #fff;

  display: flex;

  height: 80rpx;

  align-items: center;

}

4 测试效果

测试效果如图,响应速度快,效果比较惊艳。

收藏
点赞
0
个赞
共2条回复 最后由用户已被禁言回复于2022-04
#3wangwei8638回复于2020-05

制作一个自己的动漫头像吧

0
#2wangwei8638回复于2020-05

很惊艳,有木有?

0
TOP
切换版块