介绍
前几天微信朋友圈又开始一年一度的骗人小把戏，去年是“@微信官方，给我一顶圣诞帽”，当时太傻，还中招了。现在又开始“@微信官方，给我一面国旗”。
这个项目纯属娱乐：微信小程序获取用户头像，上传至服务器，服务器使用gm进行图像处理，给头像贴上四面红旗，效果如下图。有点丑，哈哈，但是达到了装逼的效果，可以用四面红旗碾压你的好友。
服务端用的nodejs，使用Express搭建web服务，gm进行图片处理，formidable接收上传图片。
本文从0开始，讲述如何完成的项目。
小程序
目标效果：用户打开小程序后，即能看到头像标上四面国旗的样子，点击按钮就能保存到相册。（图片好大？将就看吧）
上传用户头像
首先说上传图片，微信提供的API：wx.uploadFile可以轻松的实现此功能。官方的介绍写的是：“将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data。”所以实际上是对HTTPS POST 请求再次封装，使用更加简易。使用方法如下：（选择本地图片上传至服务器）
wx.chooseImage({
success (res) {
const tempFilePaths = res.tempFilePaths
wx.uploadFile({
url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
filePath: tempFilePaths[0], //标记1
name: 'file',
formData: {
'user': 'test'
},
success (res){
const data = res.data
//do something
}
})
}
})
但我的目标是上传用户头像，为了简化用户操作，我打算直接使用微信的接口获取用户头像，而不是让用户主动上传保存在本地的头像，以此减少用户主动操作。
现在创建微信小程序，在app.js和index.js都默认有获取用户信息（头像和暱称）的代码。并且头像的信息是以src的形式保存的（如下src="{{userInfo.avatarUrl}}"）。这个地址是网络地址，我试过，打印出来用浏览器能打开。
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
一开始我的做法是直接将这个网络地址填入wx.uploadFile的filePath，即第一段代码的“标记一”处。结果就报错了。后来自己想了想确实不太合理，怎么能够把一张网络图片“上传”到我自己的服务器里呢？
所以打算先把我的头像使用wx.downloadFile下载下来，注意这里的下载并不是直接就把文件放入本地了，而是放入了一个临时的文件路径（tempFilePath）。小程序文档对临时文件路径的解释是：“本地临时文件只能通过调用特定接口产生，不能直接写入内容。本地临时文件产生后，仅在当前生命周期内有效，重启之后即不可用。”
现在将这个临时文件路径填入上述的wx.uploadFile的filePath，就能向服务器上传啦。（现在就去服务器部署接收了，建议先跳过下面部分直接到nodejs部分，一会儿再回来看）
源码在在最下面。
从服务器下载图片
因为需要用户自主选择是否保存图片到相册，所以做了个按钮（如上面的效果图所示），如果直接自动保存到相册感觉像是流氓软件一样，体验极差。
点击按钮后执行downLoadImage，如下：
downLoadImage(){
//console.log(11)
wx.downloadFile({
url: this.data.imageSrc, //将服务器返回的图片地址放入data的imageSrc
success: function (res) {
console.log(res);
//图片保存到本地
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath, //res.tempFilePath即上面提到的临时文件地址
success: function (data) {
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
})
},
fail: function (err) {
console.log(err);
if (err.errMsg === "saveImageToPhotosAlbum:fail auth denied") {
console.log("当初用户拒绝，再次发起授权")
wx.openSetting({
success(settingdata) {
console.log(settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
} else {
console.log('获取权限失败，给出不给权限就无法正常使用的提示')
}
}
})
}
},
complete(res) {
console.log(res);
}
})
}
})
}
保存图片到相册需要用户授权，加到app.js里：
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
console.log('授权成功')
}
})
}
}
})
服务端nodejs
nodejs上手很容易，当然，要求有js基础。我开始做的时候连nodejs是什么都不知道。看看菜鸟教程的nodejs教程相信可以很快上手。nodejs的安装前面这个链接里也有。
Express搭建web应用
菜鸟教程的Node.js Express 框架介绍得非常详细了，墙裂建议看一看。
下面是部分代码
app.use('/public', express.static('../../../public')); //发布的静态文件地址，类似web服务器的网站发布页
//前面是url格式，访问如www.XXX.cn:8083/public/文件名， 后面是文件夹的本地地址
app.listen("8083",function () { //监听8083端口，成功则执行回调
console.log(12)
});
app.post("/image",function (req,res) {
//console.log(2); 调试用
var form = new formidable.IncomingForm();
//console.log(form);
form.encoding = 'utf-8';
form.uploadDir = path.join(__dirname + "../../../../public");//在此，图片已经成功保存，
//文件夹随便放哪，我放在nodejs的根目录
form.keepExtensions = true;//保留后缀
console.log(3);
form.maxFieldsSize = 2 * 1024 * 1024;
这段代码定义了上传图片的 接口，客户端访问http//:www.domain.com:8083/image，在服务器的自己定义的文件夹内就能看到上传的图片。
gm处理图片
也就是用了几个很常用的API，想稍深入了解的可以官网走一波。
我的操作很傻，就是把小红旗抠下来，然后XY方向镜像一下，贴到四个角上。
代码片段：
gm('../../../public/'+avatarName).resize(500,500)
.write('../../../public/'+avatarName, function (err) {
if (err) console.log(err);
}); //将上传的图片大小调整至(500px,500px),然后重新写入原来的地址，覆盖掉上传的头像
gm()
.in('-page', '+0+0') // 放置位置
.in('../../../public/'+avatarName)
.in('-page', '+0+0')
.in('../../../public/qi.png')
.in('-page', '+0+0')
.in('../../../public/left-top.png')
.in('-page', '+337+0')
.in('../../../public/right-top.png')
.in('-page', '+0+337')
.in('../../../public/left-butt.png')
.mosaic()
.write('../../../public/'+'OK'+avatarName, function (err) {
if (err) console.log(err);
});//这段代码就是在进行图片合并
res.send("/public/"+"OK"+avatarName)//向客户端发送最终生成的图片路径
})
支持https
也是比较烦的，如果只是为了学习、调试着玩的话，这一步也没必要了。
因为微信的安全要求，要想小程序上线，nodejs的接口必须搞成https，在网上搜了一番，找到了一个博主的博客，很有用。Nodejs配置Https服务，最后就在我的JS文件内加了几行，解决了问题。（结果最后还是没有过审，算了）
/*这几行注释掉
app.listen("8083",function () {
console.log(12)
});
*/
const httpsOption = {
key : fs.readFileSync("../../../https/XXX.key"),
cert: fs.readFileSync("../../../https/XXX.crt")
}
var https =require("https");
https.createServer(httpsOption, app).listen(8083);
源码
嘻嘻，以前按照惯例是给个免费链接的，为了赚赚积分，现在用csdn的下载链接。
小程序index.js的完整代码，我就注释了我的服务器，其它没变。。
nodejs的js完整代码，我放在了nodejs\node_modules\npm\node_modules下，所以前文里的代码里有很多个返回上级目录
../../../public
注：本人也是菜鸟，博客也是拼拼凑凑查了很多资料，有错误和改进的地方还请指点。