在微信小程序中实现拍照功能，以及拍完保存本地功能，并使用画布对图片进行简单的滤镜添加。（举例子为黑白滤镜）

一、实现拍照功能

在wxml页面文件中

//使用微信自带的 camera相机功能
<camera binderror="error" style="width: 100%; height: 300px; border: 2px solid skyblue;"></camera>
//点击按钮触发拍照 bindtap="takePhoto"
<button type="warn" bindtap="takePhoto" style="display:block">点击拍照</button>
//拍完之后把图片渲染给image标签，记得要在data里面定义这个src变量
<image mode="widthFix" src="{{src}}"></image>

然后再对应的js文件中

 takePhoto() {
    var that = this;
    //创建相机
    var ctx = wx.createCameraContext();
    //调用相机api的一个方法
    ctx.takePhoto({
      quality: 'high',
      success: function(res) {
        that.setData({
          src: res.tempImagePath
        });
        // 拍照成功后立即尝试保存到相册
        that.saveToAlbum(res.tempImagePath);
      }
    });
  },
  //保存照片的函数
  saveToAlbum(tempImagePath) {
    //小程序api保存图片到本地
    wx.saveImageToPhotosAlbum({
      filePath: tempImagePath,
      success: function() {
        wx.showToast({
          title: '照片已保存到相册',
          icon: 'success',
          duration: 2000
        });
      },
      fail: function(err) {
        if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied") {
          // 如果没有权限，请求用户授权
          wx.showModal({
            title: '提示',
            content: '需要您的授权才能保存到相册',
            showCancel: false,
            confirmText: '去授权',
            success: function (res) {
              if (res.confirm) {
                //掉起手机权限
                wx.openSetting({
                  success: (settingRes) => {
                    if (settingRes.authSetting['scope.writePhotosAlbum']) {
                      // 用户重新授权成功后，再次尝试保存
                      that.saveToAlbum(tempImagePath);
                    }
                  }
                });
              }
            }
          });
        } else {
          wx.showToast({
            title: '保存失败',
            icon: 'none',
            duration: 2000
          });
        }
      }
    });
  },

这样就能实现简单的相机拍照保存本地的功能

二、对保存过的图片使用微信画布简单实现滤镜功能 

1.在xml文件中

<view class="addpicture">
  <image class="{{addblur == 1 ? 'addblur':''}}{{oldEffect == 1 ?'oldeffect':''}} {{addretro == 1 ?'addretro':''}}{{addBeati == 1 ? 'addBeati':''}} img " mode="aspectFit" src="{{pic}}"></image>
  <canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
  <view class="effectview">
    <button class="btn" bindtap="bandw">黑白</button>
  </view>
   <button bindtap="getphoto" class="foot">选择照片</button>
</view> 

2.在js文件中 

 //选择照片按钮的代码
  getphoto: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( wx.getStorageSync('img'));
      }
    })
  },
   bandw: function () {
  this.loadAndProcessImage();
},
//创建画布更新画布附上黑白滤镜
loadAndProcessImage: function () {
  let self = this;
  let abc= wx.getStorageSync('img')[0]
  console.log(abc);
  // 获取图片信息
  wx.getImageInfo({
    src: abc,
    success: function(imageInfo) {
      // 创建画布上下文
      const context = wx.createCanvasContext('firstCanvas');
      
      // 绘制图片到画布
      context.drawImage(abc, 0, 0, 300, 200); // 注意调整尺寸以匹配画布
      context.draw(false, () => { // false 表示非立即执行
        // 获取并处理图像数据
        wx.canvasGetImageData({
          //注意这个画布id跟你写的画布标签id要一致
          canvasId: 'firstCanvas',
          x: 0,
          y: 0,
          width: 300,
          height: 200,
          success(result) {
            let data = result.data;
            
            // 应用黑白处理逻辑，此处参考博客园hjh3407的黑白代码
            //https://www.cnblogs.com/buaa17373407hjh/p/12970816.html
            //以及其他简单滤镜都有在文章中写到，具体请参考
            for (let i = 0; i < result.width * result.height; i++) {
              let R = data[i * 4 + 0];
              let G = data[i * 4 + 1];
              let B = data[i * 4 + 2];
              let grey = R * 0.3 + G * 0.59 + B * 0.11;
              data[i * 4 + 0] = grey; // R
              data[i * 4 + 1] = grey; // G
              data[i * 4 + 2] = grey; // B
            }
            
            // 更新画布
            wx.canvasPutImageData({
              canvasId: 'firstCanvas', // 注意这里应该与获取数据的canvasId一致，除非你想输出到另一个画布
              x: 0,
              y: 0,
              width: 300,
              data: data,
              success(res) {
                console.log('Image processed and updated on the canvas.');
                // 刷新画布以显示更新
                context.draw();
              }
            });
          },
          fail(err) {
            console.error('Failed to get image data from canvas.', err);
          }
        });
      });
    },
    fail(err) {
      console.error('Failed to get image info.', err);
    }
  });
},