当微信小程序遇上TensorFlow：小程序实现

云水木石

发布于 2019-07-01 17:41:49

9070

发布于 2019-07-01 17:41:49

首先要吐槽一下微信小程序开发工具没有Linux版本，为了开发微信小程序，我不得不搬出我的娱乐机iMac。对着硕大的屏幕，看着如蚂蚁般的文字，真心想问一下，那些使用iMac做开发机的朋友们不会肩周发炎，双眼发涩么？

言归正传，在前面的两篇文章《当微信小程序遇上TensorFlow：Server端实现》和《当微信小程序遇上TensorFlow：Server端实现补充》中，谈到了服务端的实现，本文将继续探讨小程序的实现。

我之前一直从事浏览器引擎的开发工作，对于HTML、CSS、Javascript并不陌生，但没有过多使用前端技术。好在微信小程序在很多地方借鉴了HTML、CSS，也用到了JS，上手起来很快。在浏览了一下入门手册之后，就在微信小程序模板的基础上开发出了一个简单的原型程序。

本微信小程序的主要实现功能点在于：

调用相机拍照或选择相册中的图片;
图片缩放，获取图像的RGB数据，;
组成JSON数据，通过HTTP POST发送到服务器端，并接收返回的响应数据

调用相机拍照或选择相册

由于微信为小程序封装了拍照和选择相册功能，提供了wx.chooseImage API，所以这个功能实现起来非常简单：

  // 拍照
 doTakePhoto: function () {
   // 选择图片
   wx.chooseImage({
     count: 1,
     sizeType: ['compressed'],
     sourceType: ['camera'],
     success: function (res) {
       ...
     },
     fail: e => {
       console.error(e);
     }
   })
 }

图片缩放

网上有相关的资料，具体说来其方法是在小程序page中放一个Canvas，然后调用Canvas Context的drawImage绘制图像，最后调用 wx.canvasGetImageData 得到图片的像素信息，代码如下：

// 获取图像RGB数据
var getImageRGB = function (canvasId, imgUrl, callback, imgWidth, imgHeight) {
 const ctx = wx.createCanvasContext(canvasId);
 ctx.drawImage(imgUrl, 0, 0, imgWidth || 299, imgHeight || 299);
 ctx.draw(false, () => {
   // API 1.9.0 获取图像数据
   wx.canvasGetImageData({
     canvasId: canvasId,
     x: 0,
     y: 0,
     width: imgWidth || 299,
     height: imgHeight || 299,
     success(res) {
       var result = res;
       console.log([result.data.buffer]);       var i, j;
       rows = [];
       for (i = 0; i < result.width; i++) {
         cols = [];
         for (j = 0; j < result.height; j++) {
           rgb = [];
           index = i * result.width + j * 4;         // 每个点包含RGBA 4个分量
           rgb.push(result.data[index] / 255);       // r
           rgb.push(result.data[index + 1] / 255);   // g
           rgb.push(result.data[index + 2] / 255);   // b
           // 忽略alpha值           cols.push(rgb);
         }
         rows.push(cols);
       }       callback(rows);
     },
     fail: e => {
       console.error(e);
     },
   })
 })
};

这段代码很容易理解，获取到图像的RGB数据后，将其存放入JSON数组中。

HTTP POST

微信为小程序原生提供了wx.request API，所以在功能实现上不费吹灰之力：

getImageRGB('dogCanvas', filePath, function (rgbData) {
 //  在此处得到的RGB数据
 json_data = {
   "model_name": "default", "data": { "image": [] }
 }
 json_data["data"]["image"] = [rgbData]; wx.request({
   url: "https://ilego.club:8500",
   method: "POST",
   data: json_data,
   success: function (respose) {
     prediction = respose.data["prediction"];
     console.log(prediction);
   }
 });
});