100-days-Coding - day13

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 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.