百度AI人像动漫化

人像动漫化

课程知识

• 小程序选择图片
• 图片转为base64格式
• 百度AI鉴权
• 百度AI人像动漫化接口

创建小程序

• 创建home页面

• 删除index和logs页面路劲和页面

• 配置小程序外观

  "navigationBarBackgroundColor": "#FF83FA",
  "navigationBarTitleText": "动漫相机",
  "disableScroll": true
  

页面基本布局

• wxml

  <view class="home">
    <image src="/assets/bj.jpg"></image>
    <view class="btn">
      <button>动漫</button>
      <button>戴口罩</button>
    </view>
  </view>
  

• wxss

  /* pages/home/home.wxss */
  page,.home, .home image {
    width:100%;
    height: 100%;
  }
  
  .home .btn {
    width: 100%;
    position: fixed;
    bottom: 30px;
    display: flex;
    justify-content: space-around;
  }
  
  .home .btn button{
    width: 300rpx;
    background: #FF83FA;
    color: #000;
    font-weight: normal;
  }
  

拍照或者选择图片

选择图片

• 给按钮注册点击事件

  <view class="btn">
    <button bindtap="chooseImg" data-type="cartoon">动漫</button>
    <button bindtap="chooseImg" data-type="masks">戴口罩</button>
  </view>
  

• 定义选择图片的方法

  // 选择图片
    chooseImg (e) {
      const type = e.currentTarget.dataset.type
      // 选择图片
      wx.chooseImage({
        count: 1,
        sourceType: ['album', 'camera'],
        success: res=>{
          console.log(res.tempFilePaths[0])
        }
      })
    }
  

百度AI介绍获取

提供全球领先的语音、图像、NLP等多项人工智能技术

• 创建应用

  通过控制台》图像效果增强》创建应用

• 百度AI鉴权获取access_token

  // 鉴权获取access_token
  getAccessToken () {
    const accessToken = wx.getStorageSync('accessToken')
    if (accessToken) return this.setData({
      accessToken
    })
    // 发起请求获取access_token
    wx.request({
      url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=QgpnVnPBkL3egLjArnSedwSN&client_secret=wMbL27R1RwpGERwZuVQ9HnhEvI0yrV3T',
      success: res=>{
        console.log(res)
        if (res.statusCode !== 200) return wx.showToast({
          title: '授权失败',
          icon: 'none'
        })
  
        this.setData({
          accessToken: res.data.access_token
        })
        wx.setStorageSync('accessToken', res.data.access_token)
      }
    })
  }
  

  onLoad: function (options) {
    this.getAccessToken()
  }
  

图片转换为base64

文件管理器

• 获取文件管理器将图片转换为base64

  // 选择图片
  wx.chooseImage({
    count: 1,
    sourceType: ['album', 'camera'],
    success: res=>{
      // 获取文件管理器
      const fileManager = wx.getFileSystemManager()
      // 读取文件
      fileManager.readFile({
        filePath: res.tempFilePaths[0],
        encoding: 'base64',
        success: res=>{
          console.log(res)
        }
      })
    }
  })
  

• 抽离该方法

  // 图片转base64
  imgBase64 (imgUrl) {
    // 获取文件管理器
    const fileManager = wx.getFileSystemManager()
    // 读取文件
    fileManager.readFile({
      filePath: imgUrl,
      encoding: 'base64',
      success: res => {
        console.log(res)
      }
    })
  }
  

• 调用该方法

  // 选择图片
  wx.chooseImage({
    count: 1,
    sourceType: ['album', 'camera'],
    success: res=>{
      this.imgBase64(res.tempFilePaths[0])
    }
  })
  

人像动漫化

• 请求人像动漫化接口

  // 读取文件
  fileManager.readFile({
    filePath: imgUrl,
    encoding: 'base64',
    success: res => {
      console.log(res)
      const data = {
        image: res.data
      }
      if (this.img_type === 'masks') {
        data.type = 'anime_mask'
        data.mask_id = Math.ceil(Math.random() * 8)
      }
      wx.request({
        url: 'https://aip.baidubce.com/rest/2.0/image-process/v1/selfie_anime?access_token=' + this.data.accessToken,
        header: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        method: 'POST',
        data: data,
        success: res=>{
          console.log(res.data.image)
        }
      })
    }
  })
  

• 抽离该方法

  // 人像动漫化
  imgCartoon (base64Img) {
    const data = {
      image: base64Img
    }
    if (this.img_type === 'masks') {
      data.type = 'anime_mask'
      data.mask_id = Math.ceil(Math.random() * 8)
    }
    wx.request({
      url: 'https://aip.baidubce.com/rest/2.0/image-process/v1/selfie_anime?access_token=' + this.data.accessToken,
      header: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      method: 'POST',
      data: data,
      success: res => {
        console.log(res.data.image)
      }
    })
  }
  

• 调用该方法

  this.imgCartoon(res.data)
  

保存图片进行显示

• 图片地址保存到数据中

  wx.request({
    url: 'https://aip.baidubce.com/rest/2.0/image-process/v1/selfie_anime?access_token=' + this.data.accessToken,
    header: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    method: 'POST',
    data: data,
    success: res => {
      console.log(res.data.image)
      // 保存数据
      this.setData({
        img_src: "data:image/png;base64," + res.data.image
      })
    }
  })
  

• 定义数据

  data: {
    accessToken: '',
    img_type: '',
    img_src: '/assets/bj.jpg'
  }
  

• 将数据绑定在页面

添加正在制作图片

• 选择图片成功

  wx.showLoading({
    title: '图片制作中...'
  })
  

• 获取图片数据

  wx.hideLoading()
  

  ​