位置：首页-资讯-移动开发

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

2023-09-01 12:17

短信预约 -IT技能 免费直播动态提醒

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

文章目录

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

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

一、项目展示

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

在这里插入图片描述

二、滤镜

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

//照片上传的代码  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;}

最终效果如下：
在这里插入图片描述