nodejs项目(基于Express)——为上传的图片贴上国旗图标(使用gm)并返回图片位置
文章目录
- 介绍
- 小程序
- 上传用户头像
- 从服务器下载图片
- 服务端nodejs
- Express搭建web应用
- gm处理图片
- 支持https
- 源码
介绍
前几天微信朋友圈又开始一年一度的骗人小把戏,去年是“@微信官方,给我一顶圣诞帽”,当时太傻,还中招了。现在又开始“@微信官方,给我一面国旗”。
这个项目纯属娱乐:微信小程序获取用户头像,上传至服务器,服务器使用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.tempFilePathswx.uploadFile({url: 'https://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址filePath: tempFilePaths[0], //标记1name: '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的imageSrcsuccess: 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
注:本人也是菜鸟,博客也是拼拼凑凑查了很多资料,有错误和改进的地方还请指点。
nodejs项目(基于Express)——为上传的图片贴上国旗图标(使用gm)并返回图片位置相关推荐
- Git分布式版本控制遇到的问题如何把本地的项目上传到码市上
一.Git分布式版本控制遇到的问题 错误: $ git push -u origin master fatal: unable to access 'https://git.coding.net/Su ...
- js文件夹上传到服务器,js 上传img到服务器
jQuery插件之ajaxFileUpload 前端视图,HTML与JS代码,成功上传后,返回图片真实地址并绑定到的SRC地址lt;head>lt;script src="/jquer ...
- 后台系统上传文件回显上传进度条
2019独角兽企业重金招聘Python工程师标准>>> 大家有必要看到文末 xhr传统的AJAX传输对象,在做后台系统的时候经常遇到文件上传的情景,以往的xhr已经能够应对文件表 ...
- JS 超大文件上传解决方案:分片断点上传(一)
之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...
- 上传文件到github上的两种方式
写文章注册登录 首页 下载App × 两种方法上传本地文件到github hanyuntao 关注 2017.03.31 12:20* 字数 796 阅读 16682评论 7喜欢 45 自从使用git ...
- 前后端分离 -- 深入浅出 Spring Boot + Vue + ElementUI 实现相册管理系统【文件上传 分页 】 文件上传也不过如此~
前后端分离 – 深入浅出系列 Spring Boot + Vue + ElementUI 实现相册管理系统[文件上传 分页 ] 文件上传也不过如此~ 引言 Hello,我是Bug终结者,一名热爱后端J ...
- tinymce 多图上传,上传文件,上传视频,单图上传
tinymce 多图上传,上传文件,上传视频,单图上传 参考材料 引入插件 单图上传,文件上传,图片上传 多图上传 参考材料 http://tinymce.ax-z.cn/more-plugins/a ...
- html web上传文件原理,Web上传文件的原理及实现
本文为原创,如需转载,请注明作者和出处,谢谢! 现在有很多Web程序都有上传功能,实现上传功能的组件或框架也很多,如基于java的Commons FileUpload.还有Struts1.x和Stru ...
- [转载]ASP.NET Core文件上传与下载(多种上传方式)
ASP.NET Core文件上传与下载(多种上传方式) 前言 前段时间项目上线,实在太忙,最近终于开始可以研究研究ASP.NET Core了. 打算写个系列,但是还没想好目录,今天先来一篇,后面在整理 ...
- php 上传文件漏洞,【文件上传】PHP文件上传漏洞
0x01 文件上传漏洞 文件上传漏洞顾名思义就是用户上传一个可执行的脚本文件,获得了执行服务器端命令的能力.通常,文件上传是getshell最常用.最直接的方式了.但是,文件上传本身是一个正常的业务需 ...
最新文章
- Thread start()方法和run()方法的区别
- 简单了解request与response
- UiAutomator喷射事件的源代码分析
- 将python程序打包成exe
- overflow鼠标拖拽显示_[翻译] 从零开始的 .Net Shell 扩展教程 (四) - Shell 拖拽处理程序
- 北京2018网络赛 hihocoder#1828 : Saving Tang Monk II (BFS + DP +多开一维)
- 设计模式学习笔记(十四:单件模式)
- 如何高效的使用Google
- linux实现共享文件夹功能
- SSH使用教程( Bitvise Tunnelier+Chrome+Proxy Switchy)
- #STM32学习#6D加速度传感器测量风机震动
- 计算机晋级职称考试内容,职称计算机考试内容
- IT数学逻辑之正余弦定理指正弦定理和余弦定理
- Javascript版开心农场
- XCode14 iOS16适配 pod签名
- 使用wireshark找不到“捕获接口”问题的解决
- 一个极其简单的用golang net写的tcpip echoserver
- linux中查看隐藏文件夹_如何在Linux中隐藏图像中的文件或文件夹
- 市场调研—全球及中国腹主动脉瘤(AAA)瓣膜假体行业研究及十四五规划分析报告
- 追觅、戴森、石头扫地机器人对比测评,哪个性价比更高