抠图效果

引言

上次写了一篇用小程序实现ai抠图，就差一步可以能在小程序全盘使用第三方库去抠图，苦于不能将Buffer图片源转成base64赋给，上了node.js后端去实现，这两天突然想起可以用云函数去实现，果断用云函数代替自己写后端。

纯微信小程序端实现ai抠图代码如下：

wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: res => {
    var tempFilePaths = res.tempFilePaths
    const file = tempFilePaths[0]
    this.setData({
      origin: file
    })
    console.log(file)
    wx.uploadFile({
      header: {
        'X-Api-Key': 'your key'
      },
      url: ' https://api.remove.bg/v1.0/removebg',
      filePath: file,
      name: 'image_file',
      success: res => {
        const data = res.data
        console.log(data)
        console.log('base64')
        const base64 = data.toString('base64')
        console.log(base64)
        let url = base64
        this.setData({
          url: url
        })
      }
    })
  }
})
  

只可惜上面的代码最终还是乱码的，不能赋值给image来渲染

于是后来，才动用node.js koa框架写了一个简单的后端实现。

使用云函数改写

koa就为了转发一下请求，这一跳板有点大材小用，于是乎想到用云函数，就免去买服务器，配后端环境，起koa项目。

建立云函数目录并配置

在项目根目录新建文件夹functions，并在project.config.json中增加如下设置

{
   "cloudfunctionRoot": "./functions/"
}

然后项目目录下会出现如下标识

添加云函数

鼠标右击functions文件，创建云函数ps，安装依赖，npm install request-promise --save

具体代码如下

// 云函数入口文件
const rp = require('request-promise')
// 云函数入口函数
exports.main = async (event, context) => {
  // const wxContext = cloud.getWXContext()
  const file = event.file
  const buffer = new Buffer.from(file, 'base64')
  const result = await rp.post({
    url: 'https://api.remove.bg/v1.0/removebg',
    formData: {
      image_file: buffer,
      size: 'auto'
    },
    headers: {
      'X-Api-Key': 'wkMhcc4TRNFpxjL79Kf8mMU1'
    },
    encoding: null
  })
  const body = result
  const image = body.toString('base64')
  return {
    image
  }
}

原理就是将文件的base64编码，再转换成buffer，再提交给remove.bg这个ai抠图api地址。于是现在只剩下一件事，就是将小程序端本来是用二进制文件上传的，要先将它改成用base64后，才能传递给云函数。

小程序端上传传base64编码

这里使用小程序的FileSystemManager.readFile方法将图片二进制文件，转成base64再提交给云函数。

相关文档：
https://developers.weixin.qq.com/minigame/dev/api/file/FileSystemManager.readFile.html

于是完整的小程序前端代码如下

wx.getFileSystemManager().readFile({
  filePath: file, //选择图片返回的相对路径
  encoding: 'base64', //编码格式
  success: res => {
    //成功的回调
    wx.cloud.callFunction({
      name: 'ps',
      data: {
        file: res.data
      },
      success: (res) => {
        console.log(res)
        const data = res.result.image
        let url = 'data:image/png;base64,' + data
        this.setData({
          url: url
        })
        //     //do something
        console.log(res)
      },
      fail(err) {
        console.log(err)
      }
    })
  }
})

先作base64编码，然后调用云函数，最后将云函数返回的base64图片资源渲染到，整个流程走完。

源码

https://gitee.com/laeser/demo-weapp 代码位于pages/ps-cloud文件夹下

关注我