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

• • 开发步骤
  • • 创建小程序
    • 功能开发
    • 实现API
    • 接口响应

开发步骤

创建小程序

1. 准备百度以及微信公众平台账号。
2. 准备微信Web开发者工具。

功能开发

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

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

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

上传照片图像处理

    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。

     /// 
/// 马赛克处理/// 
/// ///  影响范围 每一个格子数 /// 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，给图像处理按钮增加一个事件调用我们编写好的接口。

 图像处理

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