First of all, let’s make fun of the fact that there is no Linux version of wechat mini program development tool. In order to develop wechat mini program, I had to bring out my entertainment machine iMac. Looking at the huge screen and looking at the words that look like ants, I really want to ask those of you who use iMac as a developer, don’t they get shoulder irritation and sore eyes?

To get back to the point, the previous two articles “When wechat Applets meet TensorFlow: Server-side Implementation” and “When wechat Applets Meet TensorFlow: Server-side Implementation Supplement” covered the server-side implementation. This article will continue to explore the implementation of applets.

I’ve been working on browser engine development, and I’m no stranger to HTML, CSS, Javascript, but I don’t use much front-end technology. Fortunately, wechat small program in many places to learn from HTML, CSS, but also used JS, get started quickly. After browsing the manual, I developed a simple prototype program based on the template of wechat small program.

The main function points of this wechat applet are:

  1. Call the camera to take pictures or select pictures in the album;
  2. Image zoom, get RGB data of the image,;
  3. Compose JSON data, send it to the server via HTTP POST, and receive the returned response data

Call the camera to take photos or select an album

Since wechat encapsulates the functions of taking photos and selecting albums for small programs and provides the WX. chooseImage API, this feature is very simple to implement:

/ / photodoTakePhoto: functionChooseImage ({count: 1, sizeType: [) {// select wx.chooseImage({count: 1, sizeType: [)'compressed'].sourceType: ['camera'],
      success: function(res) { ... }, fail: e => { console.error(e); }})}Copy the code

zooming

There are relevant materials on the Internet. To be specific, the method is to put a Canvas in the small program page, then call the drawImage of Canvas Context to draw the image, and finally call wx.canvasGetImageData to get the pixel information of the image. The code is as follows:

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 of image data 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; // Each point contains RGBA 4 components rgb.push(result.data[index] / 255); // r rgb.push(result.data[index + 1] / 255); // g rgb.push(result.data[index + 2] / 255); // b // ignore the alpha value cols.push(RGB); } rows.push(cols); } callback(rows); }, fail: e => { console.error(e); }}})});Copy the code

This code is easy to understand. After obtaining the RGB data of the image, it is stored in a JSON array.

HTTP POST

Wechat provides wx.request API for small programs natively, so it is effortless to implement functions:

getImageRGB('dogCanvas', filePath, function(rgbData) {// RGB data obtained here 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); }}); });Copy the code

summary

Micro channel small program development is relatively simple, the function components provided by native can greatly simplify the development work, micro channel small program development tools provide a good simulation debugging environment. If you have experience with front-end development, getting started is much easier. Of course, this is just for getting started, but if you want to develop a product that needs to design a more complex interface and consider more user interaction, it’s not easy.

At present this micro channel small program is still only an embryonic form, the follow-up will continue to improve, interested can visit: github.com/mogoweb/aie… At the same time, please pay attention to my wechat official account: Yunshui Mushi.

reference

  1. Wechat applet picture compression and Base64 upload
  2. Javascript loads the image to see the RGB value at a specific point
  3. WeChat small application API: developers.weixin.qq.com/miniprogram…