百度AI人像动漫化

以你之姓@ 2023-02-13 00:29 58阅读 0赞

#### 人像动漫化 ####

##### 课程知识 #####

*  小程序选择图片
 *  图片转为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;
        }

##### 拍照或者选择图片 #####

[选择图片][Link 1]

*  给按钮注册点击事件
    
        <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 #####

[文件管理器][Link 2]

*  获取文件管理器将图片转换为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()

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.getFileSystemManager.html