當微信小程序趕上TensorFlow：小程序實現

時間 2019-11-21

標籤微信程序趕上 tensorflow 實現简体版

原文原文鏈接

首先要吐槽一下微信小程序開發工具沒有Linux版本，爲了開發微信小程序，我不得不搬出個人娛樂機iMac。對着碩大的屏幕，看着如螞蟻般的文字，真心想問一下，那些使用iMac作開發機的朋友們不會肩周發炎，雙眼發澀麼？javascript

言歸正傳，在前面的兩篇文章《當微信小程序趕上TensorFlow：Server端實現》和《當微信小程序趕上TensorFlow：Server端實現補充》中，談到了服務端的實現，本文將繼續探討小程序的實現。html

我以前一直從事瀏覽器引擎的開發工做，對於HTML、CSS、Javascript並不陌生，但沒有過多使用前端技術。好在微信小程序在不少地方借鑑了HTML、CSS，也用到了JS，上手起來很快。在瀏覽了一下入門手冊以後，就在微信小程序模板的基礎上開發出了一個簡單的原型程序。前端

本微信小程序的主要實現功能點在於：java

調用相機拍照或選擇相冊中的圖片;
圖片縮放，獲取圖像的RGB數據，;
組成JSON數據，經過HTTP POST發送到服務器端，並接收返回的響應數據

調用相機拍照或選擇相冊

因爲微信爲小程序封裝了拍照和選擇相冊功能，提供了wx.chooseImage API，因此這個功能實現起來很是簡單：git

// 拍照
  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 獲得圖片的像素信息，代碼以下：github

// 獲取圖像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數組中。web

HTTP POST

微信爲小程序原生提供了wx.request API，因此在功能實現上不費吹灰之力：json

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);
    }
  });
});
複製代碼