微信小程序｜使用小程序制作一个马赛克处理工具

此文主要使用微信小程序制作一个马赛克处理工具，这个场景在生活中也非常常见，例如新闻之类有些视频或者图片不想给大众展示就会将其和谐掉，这就是马赛克应用。

开发步骤

功能开发

1. 打开微信开发者工具，新建项目，依次选择不使用模板、不使用云服务。

2. 在pages文件夹下面创建一个文件夹并新建对应的page文件。

3. 在page上实现图片上传功能，需要将用户上传的图片显示到界面上，增强用户体验。

<view class="containerBox">
  <view class="leftBtn" bindtap="loadImage">
  <image src="../../images/xj.png"  class="btnImg"></image>
  上传照片
  </view>
  <view class="rightBtn" bindtap="identify">
  <image src="../../images/face.png"  class="btnImg"></image>
  图像处理
  </view>
</view>

    let that = this;
    wx.chooseImage({
      count: 0,
      sizeType: ['original', 'compressed'], //原图 / 压缩
      sourceType: ['album', 'camera'], //相册 / 相机拍照模式
      success(res) {
        that.setData({
          reproduction: res.tempFilePaths[0]
        });
        //将图片转换为Base64格式
        wx.getFileSystemManager().readFile({
          filePath: res.tempFilePaths[0],
          encoding: 'base64',
          success(data) {
            let baseData = data.data; //'data:image/png;base64,' + data.data;
            that.setData({
              baseData: baseData
            });
          }
        });
      }
    })

实现API

1. 打开Visual Studio，创建新项目，选择ASP.NET Web应用程序(.NET Framework)。

2. 填写项目名称及选择对应的保存位置，框架版本我们这里选择4.7.2。

3. 选择MVC用它来搭建API接口，其他的选项默认即可。

4. 在Controllers文件夹找到HomeController.cs，双击打开。

5. 定义马赛克处理算法以及用于请求的接口，将上传的图片分割成若干个N * N像素的小区块，每个小区块的颜色都是相同的，返回一个Bitmap。

     /// <summary>
        /// 马赛克处理
        /// </summary>
        /// <param name="bitmap"></param>
        /// <param name="effectWidth"> 影响范围 每一个格子数 </param>
        /// <returns></returns>
        public Bitmap AdjustTobMosaic(System.Drawing.Bitmap bitmap, int effectWidth)
        {
            // 差异最多的就是以照一定范围取样 玩之后直接去下一个范围
            for (int heightOfffset = 0; heightOfffset < bitmap.Height; heightOfffset += effectWidth)
            {
                for (int widthOffset = 0; widthOffset < bitmap.Width; widthOffset += effectWidth)
                {
                    int avgR = 0, avgG = 0, avgB = 0;
                    int blurPixelCount = 0;

                    for (int x = widthOffset; (x < widthOffset + effectWidth && x < bitmap.Width); x++)
                    {
                        for (int y = heightOfffset; (y < heightOfffset + effectWidth && y < bitmap.Height); y++)
                        {
                            System.Drawing.Color pixel = bitmap.GetPixel(x, y);

                            avgR += pixel.R;
                            avgG += pixel.G;
                            avgB += pixel.B;

                            blurPixelCount++;
                        }
                    }

                    // 计算范围平均
                    avgR = avgR / blurPixelCount;
                    avgG = avgG / blurPixelCount;
                    avgB = avgB / blurPixelCount;

                    // 所有范围内都设定此值
                    for (int x = widthOffset; (x < widthOffset + effectWidth && x < bitmap.Width); x++)
                    {
                        for (int y = heightOfffset; (y < heightOfffset + effectWidth && y < bitmap.Height); y++)
                        {
                            System.Drawing.Color newColor = System.Drawing.Color.FromArgb(avgR, avgG, avgB);
                            bitmap.SetPixel(x, y, newColor);
                        }
                    }
                }
            }
            return bitmap;
        }

6. 定义一个接口，用于给小程序调用，参数就是小程序上传的图片，返回也给一张图片即可。

public ActionResult AdjustTobMosaicImg()
   {
       //原图
       string img = Request.QueryString["image"];
       Bitmap map = new Bitmap(img);
       //马赛克处理后的图片
       Image img1 = AdjustTobMosaic(map, 20);
       img1.Save(@"这里放虚拟目录以及处理好的图片地址", ImageFormat.Jpeg);
       return Json(img1);
   }

接口响应

1. 回到小程序page，给图像处理按钮增加一个事件调用我们编写好的接口。

 <view class="rightBtn" bindtap="identify">
  <image src="../../images/face.png"  class="btnImg"></image>
  图像处理
  </view>

2. 在js中请求API实现的接口并将处理好的图片进行展示，这样就能得到一个马赛克处理后的图像。

    wx.request({
      url: '这里放你API的地址',
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: {image:that.data.baseData},
      success: function (identify) {
        that.setData({
          result:identify.data
        });
      }
    })