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

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

时间：2023-05-25 07:27:22

文章目录

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

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

一、项目展示

这是一款实用的工具型小程序

共有滤镜、效果图和动态滤镜三个功能

用户可以选择想要处理的图片，设置模糊、怀旧、复古、美白以及其他效果

同时程序还增设了效果图功能

用户可以自行调整饱和度、亮度和对比度

此外程序还有动态效果图的功能

二、滤镜

滤镜功能设置了四个效果

模糊、怀旧、复古和美白

点击还原即清除所有增设的滤镜

用户可以点击选择照片上传照片

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

<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>

.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;}

最终效果如下：