专栏首页大龄程序员的人工智能之路当微信小程序遇上TensorFlow:小程序实现

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

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

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

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

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

  1. 调用相机拍照或选择相册中的图片;
  2. 图片缩放,获取图像的RGB数据,;
  3. 组成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);
   }
 });
});

小结

微信小程序开发起来还是比较简单的,原生提供的功能组件能够极大的简化开发工作,微信小程序开发工具提供了很好的模拟调试环境。如果有过前端开发经验,入手会更加简单。当然,这只是针对入门而言,如果要开发一个产品,需要设计更加复杂的界面,考虑更多的用户交互,那并不是一件简单的事情。

目前这个微信小程序仍然只是一个雏形,后续会持续进行完善,有兴趣的可以访问:https://github.com/mogoweb/aiexamples/ ,同时敬请关注我的微信公众号:云水木石。

参考

  1. 微信小程序图片压缩及base64化上传
  2. javascript加载图片查看具体某一点RGB值
  3. 微信小程序API: https://developers.weixin.qq.com/miniprogram/dev/api/

本文分享自微信公众号 - 云水木石(ourpoeticlife),作者:云水木石

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-10-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 当微信小程序遇上TensorFlow - tensorflow.js篇

    在上一篇推送《重磅好消息!TensorFlow开始支持微信小程序》中,介绍了TensorFlow开始支持微信小程序平台,并计划将我之前开发的人工智能微信小程序识...

    云水木石
  • 手把手教你开发人工智能微信小程序(1):Hello WeChat!

    每个开始学习编程的程序员,大约是从“Hello World!”开始的吧。就这样一个简简单单在屏幕上输出“Hello World!”字样的程序,帮助我们进入编程世...

    云水木石
  • 深度学习的JavaScript基础:矩阵和向量的表示

    与Java、C++这样的静态类型语言不同,JS中的变量似乎没有类型,在声明变量时不用指定变量类型。但实际上JS也有字符串、数字、布尔值、对象、数组、未定义等类型...

    云水木石
  • 对于H5和小程序,知多少?

    微信小程序和微信的原生功能应用在本质上是一样的——它们都是Web App。Web App就是一种通过H5页面技术实现的,和Native App的功能和界面几乎一...

    用户6367961
  • 【晓头条】小程序开放「内嵌网页」新能力,可关联 500 个公众号 / 特斯拉推首个官方小程序 / 4 人因制售王者荣耀外挂被刑拘

    就在 11 月 2 日晚,微信又搞了一个大新闻。这次,大家千呼万唤的小程序「内嵌网页」Web View 功能,终于开放了!

    知晓君
  • 小程序流量算在大王卡里吗 / 小程序锁屏后会关闭吗 / 听广播的小程序推荐 | 小程序问答 #08

    言归正传,本期小程序问答,知晓程序(微信号 zxcx0101)为大家解决的问题有 :

    知晓君
  • 微信新出的「门店小程序」,居然支持 227 个服务类目!

    也就是说,做一个门店小程序,就像申请一个微信公众号一样简单。不需要有技术背景,小程序的准入门槛直接降到了地面。

    知晓君
  • 如何在微信群 PK 步数?他做的小程序,比微信运动更好用 | 晓组织 #10

    大家好,我是龚乘伟。现就职于美的电商,是一名前端开发工程师,也是一名去年的应届毕业生。

    知晓君
  • 不负春光!用这 6 款小程序,出去踏青出去浪

    知晓君
  • 微信小程序,开发大起底

    作者简介:张智超,北京微函工坊开发工程师,CSDN微信开发知识库特邀编辑。微信小程序爱好者。 感谢@翟东平 @qq_31383345 @nigelyq 等热情参...

    智能算法

扫码关注云+社区

领取腾讯云代金券