微信小程序项目实例——图片处理小工具（自制低配版美图秀秀）

文章目录

微信小程序项目实例——图片处理小工具（自制低配版美图秀秀）
一、项目展示
二、滤镜
三、效果图
四、动态滤镜
文末

项目代码见文字底部，点赞关注有惊喜

一、项目展示

这是一款实用的工具型小程序
共有滤镜、效果图和动态滤镜三个功能
用户可以选择想要处理的图片，设置模糊、怀旧、复古、美白以及其他效果
同时程序还增设了效果图功能
用户可以自行调整饱和度、亮度和对比度
此外程序还有动态效果图的功能

二、滤镜

滤镜功能设置了四个效果
模糊、怀旧、复古和美白
点击还原即清除所有增设的滤镜
用户可以点击选择照片上传照片

//照片上传的代码takephoto:function(){var self = this;wx.chooseImage({count: 1, // 最多可以选择的图片张数，默认9sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有success: function(res){self.setData({// picArray:res.tempFilePathspic:res.tempFilePaths});wx.setStorageSync('img', res.tempFilePaths)console.log(res);}})},

<!--picture.wxml-->
<view class="addpicture"><image class="{{addblur == 1 ? 'addblur':''}}{{oldEffect == 1 ?'oldeffect':''}} {{addretro == 1 ?'addretro':''}}{{addBeati == 1 ? 'addBeati':''}} img " mode="aspectFit" src="{{pic}}"></image><view class="effectview"><button class="btn" bindtap="addblur">模糊</button><button class="btn" bindtap="addOld">怀旧</button><button class="btn" bindtap="addretro">复古</button><button class="btn" bindtap="addBeati">美白</button></view><button bindtap="originpic" class="mid">还原</button><button bindtap="takephoto" class="foot">选择照片</button>
</view>

<!--picture.wxss-->
.addpicture{display: flex;flex-direction: column;width:100%;height: 1500rpx;
}.foot{display: flex;margin-top:3%;width: 80%;height: 80rpx;flex-direction: column;align-items: center;justify-content: center;color: white;background-color: #faa770;
}.foot::after{border-width: 0;
}.img{width: 100%;
}.addblur {filter: blur(6px);
}
.btn {display: flex;align-items: center;justify-content: center;width:20%;height:70rpx;font-size:14px;
}
.effectview {margin-top: 3%;width: 100%;display: flex;flex-direction: row;justify-content: space-around;
}.mid{display: flex;align-items: center;justify-content: center;margin-top: 3%;width: 80%;height: 80rpx;color:white;background-color: #757F9A;
}.mid::after{border-width: 0;
}.oldeffect {filter: sepia(.5);
}
.addretro {filter: grayscale(1);
}
.addBeati {filter:  brightness(130%);
}

滤镜效果如下：

三、效果图

效果图功能下
用户可以自行调整图片的饱和度、亮度和对比度

//调整代码baohedu: function (e) {var self = this;self.setData({saturate: e.detail.value});},liangdu: function (e) {var self = this;self.setData({brightness: e.detail.value});},duibidu: function (e) {var self = this;self.setData({contrast: e.detail.value});},

效果如下：

四、动态滤镜

动态滤镜将直接生成动态的图片效果

核心代码如下：

//动态变化效果.pic {margin-top: 20px;width: 100%;
}
@keyframes picAnamiton {0% {filter: grayscale(.5) blur(1px) saturate(2);}100% {filter: grayscale(.2) blur(6px) saturate(9);}
}
.picanmaion {animation-name: picAnamiton;animation-duration: 2s;animation-iteration-count: 10;animation-direction: alternate;animation-timing-function: ease-in-out;animation-fill-mode: forwards;animation-delay: 0s;
}

最终效果如下：

文末

具体的介绍就到这里了
小程序在点击滤镜效果时
如果点击太快会来不及反应
需要注意一下哦
有兴趣的同学可以继续研究
代码放到下面链接里了

点击下载小程序

微信小程序项目实例——图片处理小工具（自制低配版美图秀秀）相关推荐

微信小程序：图片拼图小程序源码
该款小程序支持多种流量主另外支持多种图形模板制作切割另外也支持长图合成等功能安装简单,新手容易上手,具体就不多说了大家自行研究吧! 小程序源码下载地址: 微信小程序:图片拼图小程序源码-小程序文 ...
给图片下方加水印_别再看不起美图秀秀啦，想要做长图，批量加水印，用它超级方便...
Hello大家好,我是撒娇的小肉片. 时隔超长时间的更新,不知道还有多少人记得我哈哈.今天想要和大家分享的是如何批量加水印,如何拼成长图,操作简单,你值得拥有哦~ 最重要的是免费!免费!完全免费! 由 ...
android 图片排版,Android版美图秀秀优化拼图排版
看完了<北京爱情故事>,那留下太多悬念的结局,让人不由思考着关于爱的故事还会怎样延续?陈思成佟丽娅相恋却在戏外给了我们一个满意的答案.正巧,美图秀秀安卓v1.4.5新版上线,优化拼图版式和 ...
微信小程序本地图片在开发工具显示手机预览不显示
微信小程序在设置背景图片时,使用本地路径,手机预览无法显示. 首先检查图片的路径,是否有中文,都没有问题的时候,看插入背景图片格式采用background-image: 即: <view cla ...
微信小程序版“美图秀秀”源码
使用代码下载并安装微信开发者工具,使用微信号扫码登录开发者工具. 打开微信开发者工具,点击"小程序项目"按钮,输入小程序 AppID,项目目录选择下载的代码目录,点击确定创建小程 ...
小程序中图片点击预览、长按识别图中二维码的问题
通过自己的测试以及各类博客资料的查询,总结如下: 1.小程序中的图片不能识别除小程序码以外的二维码 2.并且仅在 wx.previewImage 中支持长按识别官方文档(wx.previewImag ...
微信小程序项目实例SSM案例小程序医院挂号预约系统
2022全新老照片修复小程序/AI图片处理小程序
功能:发型转换.表情编辑.活照片.闭眼转睁眼.漫画人像.黑白图片上色.图片趣味处理.图像清晰度增强.对比度增强.拉伸图片恢复.无损放大图片处理
uniapp小程序分享图片
uniapp小程序分享图片 uniapp小程序分享图片流程: ①.使用canvas绘图,将图片绘制到页面上,并生成一个本地路径 ②.保存图片至本地 ③.分享到朋友详细介绍: ①.使用canvas绘图 ...
Java实现微信小程序校验图片是否含有违法违规内容
文章目录 1.Java实现微信小程序校验图片是否含有违法违规内容(security.imgSecCheck) 2.接口文档简述 3.Java实现对接接口 4.压缩图片(Thumbnails) 5.整合 ...

微信小程序项目实例——图片处理小工具（自制低配版美图秀秀）

微信小程序项目实例——图片处理小工具（自制低配版美图秀秀）

文章目录

一、项目展示

二、滤镜

三、效果图

四、动态滤镜

文末

微信小程序项目实例——图片处理小工具（自制低配版美图秀秀）相关推荐

最新文章

热门文章