使用小程序开发实现图片滤镜效果

引言

在今天的互联网时代，移动应用开发已经变得非常热门。而小程序作为一种轻量级的移动应用，具有跨平台、体积小、开发简单等诸多优势。本文将介绍如何使用小程序开发实现图片滤镜效果，为你的图片添加艺术感。

开发环境准备

在开始之前，确保你已经安装好以下开发环境：

• 微信开发者工具
• 一套文本编辑器，推荐使用Visual Studio Code

创建项目

打开微信开发者工具，点击新建项目，填入项目名称和目录，然后选择小程序模板。在创建的过程中，你可以选择使用云开发能力，这样你可以更方便地操作数据。

代码编写

添加主页面

在项目的根目录下，找到app.json文件，将其中的pages属性更改为如下内容：

"pages": [
  "pages/index/index"
]

然后在项目目录下创建pages文件夹，并在其中创建index文件夹和index.js、index.wxml、index.wxss文件。

打开index.js文件，添加以下代码：

Page({
  data: {
    imageUrl: '',
    filteredImageUrl: '',
    filterIndex: 0,
    filters: [
      { name: '原图', value: '' },
      { name: '模糊', value: 'blur(4px)' },
      { name: '灰度', value: 'gray' },
      { name: '反转', value: 'invert' },
      // 可以继续添加更多滤镜效果
    ]
  },
  onLoad: function () {

  },
  chooseImage: function () {
    const that = this
    wx.chooseImage({
      count: 1,
      success: function (res) {
        const tempFilePaths = res.tempFilePaths
        that.setData({
          imageUrl: tempFilePaths[0]
        })
      }
    })
  },
  applyFilter: function () {
    const that = this
    const filter = that.data.filters[that.data.filterIndex].value
    wx.showLoading({
      title: '应用中...',
    })
    wx.getImageInfo({
      src: that.data.imageUrl,
      success(res) {
        const ctx = wx.createCanvasContext('imageCanvas')
        ctx.drawImage(that.data.imageUrl, 0, 0, res.width, res.height)
        ctx.filter = filter
        ctx.draw(false, function () {
          wx.canvasToTempFilePath({
            canvasId: 'imageCanvas',
            success(res) {
              wx.hideLoading()
              that.setData({
                filteredImageUrl: res.tempFilePath
              })
            }
          })
        })
      }
    })
  },
  changeFilter: function (e) {
    const filterIndex = e.detail.value
    this.setData({
      filterIndex
    })
  }
})

打开index.wxml文件，添加以下代码：

<view class='container'>
  <view class='header'>
    <view class='title'>图片滤镜</view>
    <button class='choose-btn' bindtap='chooseImage'>选择图片</button>
    <picker bindchange='changeFilter' value="{{filterIndex}}" range="{{filters}}">
      <view class='filter'>
        {{filters[filterIndex].name}}
      </view>
    </picker>
    <button class='apply-btn' bindtap='applyFilter'>应用滤镜</button>
  </view>
  <view class='content'>
    <image class='original' src="{{imageUrl}}" mode='aspectFit'></image>
    <image class='filtered' src="{{filteredImageUrl}}" mode='aspectFit'></image>
    <canvas hidden id='imageCanvas'></canvas>
  </view>
</view>

打开index.wxss文件，添加以下代码：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24rpx;
}

.title {
  font-size: 18rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.choose-btn,
.apply-btn {
  width: 200rpx;
  height: 40rpx;
  border-radius: 20rpx;
  font-size: 14rpx;
  color: #FFFFFF;
  background-color: #3299FF;
  margin-bottom: 8rpx;
}

.filter {
  font-size: 14rpx;
  color: #333333;
}

.content {
  display: flex;
  justify-content: space-around;
}

.original,
.filtered {
  width: 300rpx;
  height: 300rpx;
  border: 1rpx solid #999999;
}

预览效果

点击微信开发者工具的编译按钮，然后预览效果。

总结

通过本篇博客，我们学习了如何使用小程序开发实现图片滤镜效果。你可以根据自己的需求，添加更多的滤镜效果。小程序开发简单易上手，是一个非常适合开发轻量级移动应用的框架。希望这篇博客对你有所帮助，谢谢阅读！