微信小程序?qū)崿F(xiàn)圖片處理小工具的示例代碼

更新時(shí)間：2022年06月20日 09:15:14 作者：失散多年的哥哥

本文將利用微信小程序制作一個(gè)簡易的圖片處理小工具（自制低配版美圖秀秀），有濾鏡、效果圖和動態(tài)濾鏡三個(gè)功能，快跟隨小編一起學(xué)習(xí)學(xué)習(xí)吧

一、項(xiàng)目展示

這是一款實(shí)用的工具型小程序

共有濾鏡、效果圖和動態(tài)濾鏡三個(gè)功能

用戶可以選擇想要處理的圖片，設(shè)置模糊、懷舊、復(fù)古、美白以及其他效果

同時(shí)程序還增設(shè)了效果圖功能

用戶可以自行調(diào)整飽和度、亮度和對比度

此外程序還有動態(tài)效果圖的功能

二、濾鏡

濾鏡功能設(shè)置了四個(gè)效果

模糊、懷舊、復(fù)古和美白

點(diǎn)擊還原即清除所有增設(shè)的濾鏡

用戶可以點(diǎn)擊選擇照片上傳照片

//照片上傳的代碼
  takephoto:function(){
    var self = this;
    wx.chooseImage({
      count: 1, // 最多可以選擇的圖片張數(shù)，默認(rèn)9
      sizeType: ['original', 'compressed'], // original 原圖，compressed 壓縮圖，默認(rèn)二者都有
      sourceType: ['album', 'camera'], // album 從相冊選圖，camera 使用相機(jī)，默認(rèn)二者都有
      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="{{pic}}"></image>
  <view class="effectview">
    <button class="btn" bindtap="addblur">模糊</button>
    <button class="btn" bindtap="addOld">懷舊</button>
    <button class="btn" bindtap="addretro">復(fù)古</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%);
}

濾鏡效果如下：

三、效果圖

效果圖功能下

用戶可以自行調(diào)整圖片的飽和度、亮度和對比度

//調(diào)整代碼

???????  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
    });
  },

效果如下：

四、動態(tài)濾鏡

動態(tài)濾鏡將直接生成動態(tài)的圖片效果

核心代碼如下：

動態(tài)變化效果

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

最終效果如下：