抠图效果
引言
上次写了一篇用小程序实现ai抠图,就差一步可以能在小程序全盘使用第三方库去抠图,苦于不能将Buffer图片源转成base64赋给<image>
,上了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图片资源渲染到<image>
,整个流程走完。
源码
https://gitee.com/laeser/demo-weapp 代码位于pages/ps-cloud
文件夹下
关注我
来源:oschina
链接:https://my.oschina.net/huangxiujie/blog/4482979