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
<view style='position: absolute; z-index: -1;'> <canvas 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.
作者：亨利何
链接：https://www.jianshu.com/p/0de97baf799e