day13-0905
PlantLifer
最近偶然间又看到了百度AI的相关资料，官网转了一圈之后，发现了图像识别中有几个好玩trick：
基本图像识别和场景识别
植物识别 - 「Target」
花卉识别
菜品识别
最终，实现想法落实在：
- 微信小程序 - 「摄像头采集图片，api形式进行数据提交，获取反馈展示 - ( 识别物体的百科信息，识别物体的准确度对应目标会有多个，准确度梯度排列 )」
实现过程遇到的难题：
- 摄像头拍摄照片，照片转换为base64编码进行数据提交
问题解决：
- 使用
canvas将图片的imageData传递到upng.js，用小程序自带方法wx.arrayBufferToBase64(bufferdata)进行base64编码
var upng = require('./UPNG.js')
function encodeBase64 (buffer, width, height) {
let bufferdata = upng.encode([buffer], width, height)
return wx.arrayBufferToBase64(bufferdata)
}
module.exports = {
wxBase64Code: encodeBase64
}
需要注意的问题
-
canvas的绘制- wx-html的编写-遵循官方文档，
target-id
- wx-html的编写-遵循官方文档，
<view style='position: absolute; z-index: -1;'>
<canvas style="width: 400px; height: 300px;" canvas-id="preview-canvas">
</canvas>
</view>
canvas如果使用display: none进行隐藏会导致imageData 为0，继而会造成base64编码后的图片变成透明。 「目前我的解决方案是：canvas植入底层隐藏」
-
canvas操作
const ctx = wx.createCanvasContext('preview-canvas')
console.log(ctx)
ctx.drawImage(this.data.src, 0, 0, 400, 300)
ctx.draw(false, () => {
wx.canvasGetImageData({
canvasId: 'preview-canvas',
x: 0,
y: 0,
width: 400,
height: 300,
success: (res) => {
let base64_data = wxBase64Code(res.data, res.width, res.height)
this.setData({
src: 'data:image/jpeg;base64,' + base64_data
})
// 识别
authTakePlantRecoganize({
access_token: app.globalData.access_token,
image: encodeURI(base64_data),
baike_num: 1
}).then((res) => {
app.globalData.currentPlant = res.data.result
wx.navigateBack({
url: '../index/index?info=new',
success: (res) => {
// 延长返回时间 search
wx.hideToast()
}
})
}).catch((e) => {})
},
fail: function(res) {},
complete: function(res) {},
})
})
Note: canvas的
draw方法由于异步不可控，会造成图片获取不完整所以需要使用回调
参数 类型 说明 reserve Boolean 非必填。本次绘制是否接着上一次绘制，即reserve参数为false，则在本次调用drawCanvas绘制之前native层应先清空画布再继续绘制；若reserver参数为true，则保留当前画布上的内容，本次调用drawCanvas绘制的内容覆盖在上面，默认 false callback Function 绘制完成后回调
-
upng.js使用导入
upng.js导入后在其源文件中可以从头部看到，需要 require pako, 所以upng.js的使用需要额外的依赖文件 -pako.min.js使用
wx中直接require直接调用即可，或者和我一样自己封装
结束
整个项目从诞生想法，到完成一个合格的作品 - 2天
最终编码以及debug - 1个下午
展望
集成更多好玩的接口包括但不限于baidu-AI - 「tencent-youtu已经使用过，也不错」，So The target is：
More fun is waiting for me.
