首先要吐槽一下微信小程式開發工具沒有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);
}
});
});
複製程式碼小結
微信小程式開發起來還是比較簡單的，原生提供的功能元件能夠極大的簡化開發工作，微信小程式開發工具提供了很好的模擬除錯環境。如果有過前端開發經驗，入手會更加簡單。當然，這只是針對入門而言，如果要開發一個產品，需要設計更加複雜的介面，考慮更多的使用者互動，那並不是一件簡單的事情。
目前這個微信小程式仍然只是一個雛形，後續會持續進行完善，有興趣的可以訪問：github.com/mogoweb/aie… ，同時敬請關注我的微信公眾號：雲水木石。