微信小程序项目实例——图片处理小工具（自制低配版美图秀秀）
文章目录
- 微信小程序项目实例——图片处理小工具（自制低配版美图秀秀）
- 一、项目展示
- 二、滤镜
- 三、效果图
- 四、动态滤镜
- 文末
项目代码见文字底部，点赞关注有惊喜
一、项目展示 这是一款实用的工具型小程序
共有滤镜、效果图和动态滤镜三个功能
用户可以选择想要处理的图片，设置模糊、怀旧、复古、美白以及其他效果
同时程序还增设了效果图功能
用户可以自行调整饱和度、亮度和对比度
此外程序还有动态效果图的功能
文章图片
文章图片
二、滤镜 【微信小程序|微信小程序项目实例——图片处理小工具（自制低配版美图秀秀）】滤镜功能设置了四个效果
模糊、怀旧、复古和美白
点击还原即清除所有增设的滤镜
用户可以点击选择照片上传照片
//照片上传的代码
takephoto:function(){
var self = this;
wx.chooseImage({
count: 1, // 最多可以选择的图片张数，默认9
sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
success: function(res){
self.setData({
// picArray:res.tempFilePaths
pic:res.tempFilePaths
});
wx.setStorageSync('img', res.tempFilePaths)
console.log(res);
}
})
},
.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;
}
最终效果如下：
文末 具体的介绍就到这里了
小程序在点击滤镜效果时
如果点击太快会来不及反应
需要注意一下哦
有兴趣的同学可以继续研究
代码放到下面链接里了
点击下载 小程序
文章图片
推荐阅读
- uni-app|uni-app实现swiper滑动放大缩小、实现scroll-view与swiper双向联动
- 前端|前端面试八股文--Vue篇（持续更新）
- 前端|前端面试八股文个人汇总--普通知识篇（持续补充）
- 微信小程序|微信小程序学习之旅--零基础制作自己的小程序--第二个页面的制作
- vue|微信小程序中的web-view，实现微信小程序与h5页面间跳转
- 微信小程序|微信小程序（第二十四章）- 数据交互前置
- 小程序|微信小程序入门篇
- 微信小程序|二、零基础入门微信小程序项目开发之页面跳转实现
- axios|vue项目 使用axios封装request请求（一）