您当前的位置: 首页 > 技术文章 > 移动开发

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

作者: 时间:2022-06-30阅读数:人阅读

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

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


一、项目展示

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

在这里插入图片描述
在这里插入图片描述


二、滤镜

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

//照片上传的代码
  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);
      }
    })
  },
<!--picture.wxml-->
<view class="addpicture">
  <image class="{{addblur == 1 ? 'addblur':''}}{{oldEffect == 1 ?'oldeffect':''}} {{addretro == 1 ?'addretro':''}}{{addBeati == 1 ? 'addBeati':''}} img " mode="aspectFit" src="https://blog.csdn.net/ws15168689087/article/details/{{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;
}

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


文末

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

点击下载 小程序

在这里插入图片描述

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com

加载中~
如果您对我们的成果表示认同并且觉得对你有所帮助可以给我们捐赠。您的帮助是对我们最大的支持和动力!
捐赠我们
扫码支持 扫码支持
扫码捐赠,你说多少就多少
2
5
10
20
50
自定义
您当前余额:元
支付宝
微信
余额

打开支付宝扫一扫,即可进行扫码捐赠哦

打开微信扫一扫,即可进行扫码捐赠哦

打开QQ钱包扫一扫,即可进行扫码捐赠哦