评论

用云函数这一利器改写了ai抠图

云函数真是好,真是不想写后端啊。

抠图效果

引言

上次写了一篇用小程序实现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文件夹下

关注我

点赞 1
收藏
评论

1 个评论

  • 青寒
    青寒
    08-10

    点个赞!

    08-10
    赞同 1
    回复 1
    • 黄秀杰
      黄秀杰
      发表于小程序端
      08-12
      谢谢~
      08-12
      回复
登录 后发表内容