[猫头虎分享21天微信小程序基础入门教程] 第20天：小程序的多媒体功能与图像处理

[猫头虎分享21天微信小程序基础入门教程] 第20天：小程序的多媒体功能与图像处理

---

第20天：小程序的多媒体功能与图像处理 🎨

自我介绍

大家好，我是猫头虎，一名全栈软件工程师。今天我们继续微信小程序的学习，重点了解小程序的多媒体功能与图像处理。这些功能可以帮助你在小程序中实现丰富的多媒体交互，提高用户体验。🚀

多媒体功能

一、拍照与录像

微信小程序提供了 wx.chooseImage 和 wx.chooseVideo API，方便用户拍照和录像。

1. 拍照

wxml 文件：

<view class="container">
  <button bindtap="takePhoto">拍照</button>
  <image src="{{photoPath}}" mode="widthFix"/>
</view>

js 文件：

Page({
  data: {
    photoPath: ''
  },
  takePhoto() {
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['camera'],
      success: (res) => {
        this.setData({
          photoPath: res.tempFilePaths[0]
        });
      },
      fail: (err) => {
        console.error('拍照失败:', err);
      }
    });
  }
});

2. 录像

wxml 文件：

<view class="container">
  <button bindtap="recordVideo">录像</button>
  <video src="{{videoPath}}" controls/>
</view>

js 文件：

Page({
  data: {
    videoPath: ''
  },
  recordVideo() {
    wx.chooseVideo({
      sourceType: ['camera'],
      maxDuration: 60,
      camera: 'back',
      success: (res) => {
        this.setData({
          videoPath: res.tempFilePath
        });
      },
      fail: (err) => {
        console.error('录像失败:', err);
      }
    });
  }
});

二、音频播放与录音

微信小程序提供了 wx.createInnerAudioContext 和 wx.getRecorderManager API，用于音频播放和录音。

1. 音频播放

wxml 文件：

<view class="container">
  <button bindtap="playAudio">播放音频</button>
</view>

js 文件：

Page({
  onReady() {
    this.innerAudioContext = wx.createInnerAudioContext();
    this.innerAudioContext.src = 'https://example.com/audio.mp3';
  },
  playAudio() {
    this.innerAudioContext.play();
  },
  onUnload() {
    this.innerAudioContext.destroy();
  }
});

2. 录音

wxml 文件：

<view class="container">
  <button bindtap="startRecording">开始录音</button>
  <button bindtap="stopRecording">停止录音</button>
  <audio src="{{recordingPath}}" controls/>
</view>

js 文件：

Page({
  data: {
    recordingPath: ''
  },
  onReady() {
    this.recorderManager = wx.getRecorderManager();
    this.recorderManager.onStop((res) => {
      this.setData({
        recordingPath: res.tempFilePath
      });
    });
  },
  startRecording() {
    this.recorderManager.start({
      duration: 60000,
      sampleRate: 44100,
      numberOfChannels: 1,
      encodeBitRate: 192000,
      format: 'aac'
    });
  },
  stopRecording() {
    this.recorderManager.stop();
  }
});

图像处理

三、图片裁剪与编辑

微信小程序提供了 canvas API，可以用来实现图片的裁剪与编辑功能。

1. 图片裁剪

wxml 文件：

<view class="container">
  <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
  <button bindtap="chooseImage">选择图片</button>
  <button bindtap="cropImage">裁剪图片</button>
</view>

js 文件：

Page({
  data: {
    imagePath: ''
  },
  chooseImage() {
    wx.chooseImage({
      count: 1,
      success: (res) => {
        this.setData({
          imagePath: res.tempFilePaths[0]
        });
        this.drawCanvas();
      }
    });
  },
  drawCanvas() {
    const ctx = wx.createCanvasContext('myCanvas');
    ctx.drawImage(this.data.imagePath, 0, 0, 300, 300);
    ctx.draw();
  },
  cropImage() {
    wx.canvasToTempFilePath({
      canvasId: 'myCanvas',
      x: 50,
      y: 50,
      width: 200,
      height: 200,
      destWidth: 200,
      destHeight: 200,
      success: (res) => {
        this.setData({
          imagePath: res.tempFilePath
        });
      }
    });
  }
});

四、图片滤镜

使用 canvas API 可以实现简单的图片滤镜效果。

wxml 文件：

<view class="container">
  <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
  <button bindtap="applyFilter">应用滤镜</button>
</view>

js 文件：

Page({
  data: {
    imagePath: ''
  },
  onLoad() {
    this.chooseImage();
  },
  chooseImage() {
    wx.chooseImage({
      count: 1,
      success: (res) => {
        this.setData({
          imagePath: res.tempFilePaths[0]
        });
        this.drawCanvas();
      }
    });
  },
  drawCanvas() {
    const ctx = wx.createCanvasContext('myCanvas');
    ctx.drawImage(this.data.imagePath, 0, 0, 300, 300);
    ctx.draw();
  },
  applyFilter() {
    const ctx = wx.createCanvasContext('myCanvas');
    ctx.drawImage(this.data.imagePath, 0, 0, 300, 300);
    ctx.draw(false, () => {
      wx.canvasGetImageData({
        canvasId: 'myCanvas',
        x: 0,
        y: 0,
        width: 300,
        height: 300,
        success: (res) => {
          let data = res.data;
          for (let i = 0; i < data.length; i += 4) {
            // 简单的灰度滤镜
            let gray = (data[i] + data[i + 1] + data[i + 2]) / 3;
            data[i] = data[i + 1] = data[i + 2] = gray;
          }
          wx.canvasPutImageData({
            canvasId: 'myCanvas',
            x: 0,
            y: 0,
            width: 300,
            height: 300,
            data: data,
            success: () => {
              console.log('滤镜应用成功');
            }
          });
        }
      });
    });
  }
});

小测试 🧪

• 实现一个简单的拍照功能，并将照片展示在页面上。
• 实现一个简单的录音功能，并将录音文件播放出来。
• 实现一个简单的图片裁剪功能，选择一张图片并裁剪后展示。
• 实现一个简单的图片滤镜功能，对图片应用灰度滤镜效果。

今日学习总结 📚

概念	详细内容
拍照与录像	使用 wx.chooseImage 和 wx.chooseVideo 实现拍照和录像
音频播放与录音	使用 wx.createInnerAudioContext 和 wx.getRecorderManager 实现音频播放和录音
图片裁剪	使用 canvas API 实现图片裁剪功能
图片滤镜	使用 canvas API 实现简单的图片滤镜效果

结语

通过今天的学习，你应该掌握了如何在小程序中实现多媒体功能与图像处理。这些技术可以帮助你在小程序中实现丰富的多媒体交互，提高用户体验。明天我们将探讨小程序的社交分享与消息推送。如果你有任何疑问，欢迎关注并留言在我的公众号猫头虎技术团队。📩

---