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.

作者：亨利何
链接：https://www.jianshu.com/p/0de97baf799e