教你如何用Paddle.js开发智能化微信小程序
Posted 飞桨PaddlePaddle
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了教你如何用Paddle.js开发智能化微信小程序相关的知识，希望对你有一定的参考价值。
Paddle.js 插件+微信小程序
= 懂AI的微信小程序
在Web前端开发领域，自然少不了微信小程序的身影。相对于网页等形式的Web开发来说，微信小程序有着自身的一些优势，那么是否可以非常简单的在微信小程序中使用Web智能化的能力呢？百度Paddle.js开发团队非常关注前端小伙伴的诉求，在这个夏天为同学们推出了Paddle.js微信小程序插件，让微信小程序中使用AI能力变得So easy！
01
Paddle.js实例1：人脸框选小程序
02
Paddle.js实例2：校名识别小程序
图中是利用Paddle.js实现的校名识别小程序，输入不同的高校图片能够快速检测出学校名称结果，而且这些图片并没有上传到服务端，既可以快速地得到计算结果又没有将用户信息上传到服务端，Web AI能够很好的保护用户的隐私。
Paddle.js微信小程序插件
怎么用？
那么，如何开发一个智能化的微信小程序呢？使用Paddle.js插件只需要3个步骤：在开发者的小程序中添加插件，引入插件代码包，最后使用插件。
{
...
"plugins": {
"paddlejs-plugin": {
"version":
"0.0.2",
"provider":
"wx7138a7bb793608c3"
}
}
...
}
{
"name":
"yourProject",
"version":
"0.0.1",
"main":
"dist/index.js",
"license":
"ISC",
"dependencies": {
"paddlejs":
"^1.0.7"，
}
}
const paddlejs =
require(
'paddlejs');
const plugin = requirePlugin(
"paddlejs-plugin");
//app.js
App({
globalData: {
Paddlejs: paddlejs.runner
},
onLaunch:
function () {
plugin.register(paddlejs, wx);
}
});
-
paddlejs实例初始化 -
加载神经网络模型&预热 -
以相册选择图片为例，获取图片的像素信息作为模型输入 -
在线预测计算 -
对预测结果进行后处理
const app = getApp();
let pdjs;
Page({
onLoad:
function () {
// 1. paddlejs实例初始化
pdjs =
new app.globalData.Paddlejs({
// 网络模型地址
modelPath:
'https://paddlejs.cdn.bcebos.com/models/wine/',
// 分片参数文件数目
fileCount:
3,
// 模型输入shape
feedShape: {
fw:
224,
fh:
224
},
// 模型输出shape
fetchShape: [
1,
40,
1,
1],
// 以下三个参数为输入处理所需参数
// 输入缩放容器大小
scale:
256,
// 输入裁剪容器大小
targetSize: {
height:
224,
width:
224
},
// 均值&方差
mean: [
0.485,
0.456,
0.406],
std: [
0.229,
0.224,
0.225]
});
const me =
this;
// 2. 加载神经网络模型&预热
pdjs.loadModel().then(
res => {
me.setData({
loaded:
true
})
});
}，
chooseImage() {
// 3. 以相册选择图片为例，获取图片的像素信息作为模型输入
const me =
this;
wx.chooseImage({
count:
1,
sizeType: [
'original'],
sourceType: [
'album',
'camera'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
me.getImageInfo(res.tempFilePaths[
0]);
}
});
}
getImageInfo(imgPath) {
// 获取到图片的像素信息
const me =
this;
wx.getImageInfo({
src: imgPath,
success:
(imgInfo) => {
const {
width,
height,
path
} = imgInfo;
const canvasId =
'myCanvas';
// 获取页面中的canvas上下文，tips：canvas设置的宽高要大于选择的图片宽高，canvas位置可以绝对定位到视口不可以见
ctx = wx.createCanvasContext(canvasId);
ctx.drawImage(path,
0,
0, width, height);
ctx.draw(
false, () => {
// API 1.9.0 获取图像数据
wx.canvasGetImageData({
canvasId: canvasId,
x:
0,
y:
0,
width: width,
height: height,
success(res) {
me.predict({
data: res.data,
width: width,
height: height
});
}
});
});
}
});
},
predict(imgObj) {
// 4. 在线预测计算
const me =
this;
pdjs.predict(imgObj,
function (data) {
// 5. 对预测结果进行后处理
const maxItem = pdjs.utils.getMaxItem(data);
me.setData({
result: maps[maxItem.index]
});
});
}
});
插播小广告~~~
END
直播预告
以上是关于教你如何用Paddle.js开发智能化微信小程序的主要内容，如果未能解决你的问题，请参考以下文章