AI神器竟然能代替PS抠图了

感慨时代发展真快

用途

电商抠主图做海报，几秒搞定，比手工快几个数量级，我还没记得N多年前做企业网站，对照Photoshop一抠就是好几天；还有可以做证件照之类也是不在话下。

除了remove.bg以外，还有picup，Face++旷视等。

抠图效果

关于定价

均价1.3元，高冷小贵，picup的效果也不逊色，最高也不过0.1元

实力对比

picup对边缘处理不能remove.bg锐利，操作上还有要区分上传的是人像还是物品，而remove.bg可以一股脑往里扔

传统用法

最直接的就是网页版在线上传一张图片，其次是下载它们的客户端。

在线版是最傻瓜的，上手就用，还支持网址url复制粘贴过来直接识别抠图；客户端一般要先配置一下apikey密钥，再开始使用，相当于他把api集成好了，换换key就用了。

出于职业病，我还它的.exe包扒了扒，果不其然，清一色是node.js+electron写的，picup还用上了element-ui，一股熟悉的味道哈

码农用法

那当然是自己对api了。我发现它们有全PC平台的客户端，甚至连photoshop都集成上了，但是还没有小程序哈。

看了上述2家的api，如出一辙啊，我这里就以remove.bg为例

先看一下效果

前端代码

前端代码做的事情就是将图片传到自己的后端，等后端与抠图api交互，返回base64编码后的字符串，然后拼接上'data:image/png;base64,，交给<image>组件渲染

onTap() {
    // 上传或更换菜品图片
    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({
          url: 'http://localhost:4114/ps/upload', //仅为示例，非真实的接口地址
          filePath: file,
          name: 'image',
          success: res => {
            const data = res.data
            let url = 
              'data:image/png;base64,' + data
            this.setData({
              url: url
            })
            //do something
          },
          fail(err) {
            console.log('请求失败')
            console.log(err)
          }
        })
      }
    })
  }

后端代码

后端代码做的事情是通过koa-body这个中间件接收到File文件对象，通过抠图api得到二进制流，通过toString(‘base64’)返回给小程序端。

app.js主入口文件

在npm install koa-body安装第三方包后，在app.js主入口文件加入以下代码

const koaBody = require('koa-body')
app.use(koaBody({ multipart: true }))
const ps = require('./routes/ps/index')
router.use('/ps', ps.routes())

ps/index.js路由文件

在这个文件里就是将文件传给抠图api作处理后，直接输出流给新端，而不是像api文档示例中的那样要保存到本地

const router = require('koa-router')()
const rp = require('request-promise')
// 添加
router.post('/upload', async (ctx, next) => {
  console.log('开始上传')
  var fs = require('fs')
  console.log('接收的内容')
  var fileUrl = ctx.request.files.image.path
  console.log('文件路径')
  console.log(fileUrl)
  const result = await rp.post({
    url: 'https://api.remove.bg/v1.0/removebg',
    formData: {
      image_file: fs.createReadStream(fileUrl),
      size: 'auto'
    },
    headers: {
      'X-Api-Key': 'wkMhcc4TRNFpxjL79Kf8mMU1'
    },
    encoding: null
  })
  console.log(result)
  const body = result
  console.log('输出结果')
  console.log(body)
  ctx.body = body.toString('base64')
})

module.exports = router

结语

抠图api相见恨晚的感觉，普通人能用，平面设计师赶工时也能顶上用，现在有了api，可以发挥无限想像力，集成到自己的产品中。