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

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

开发步骤
- 功能开发
- 实现API
- 接口响应

开发步骤

功能开发

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

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

在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

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

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

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

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

定义马赛克处理算法以及用于请求的接口，将上传的图片分割成若干个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;}

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

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

接口响应

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

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

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

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

使用小程序制作一个老照片修复工具，让追忆时光触手可及
一.文章前言二.准备流程三.开发步骤四.完整代码一.文章前言此文主要通过小程序来制作一个照片修复工具,实现黑白图片上色及图像效果增强等功能. 二.准备流程 2.1.注册百度开放平台及微信公众 ...
微信小程序：流量主制作生成装逼工具
这是一款流量主制作生成小工具支持小程序流量主图制作生成也支持公众号的流量主制作生成每一种制作都包含了所有的流量主模式用户自己填写选择制作就可以了! 小程序源码下载地址: 微信小程序:流量主制作 ...
python连连看小游戏_利用Python制作一个连连看小游戏，边学边玩！
导语今天我们将制作一个连连看小游戏,让我们愉快地开始吧~ 开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Python自带的模块环境搭建安装Python并添加到环 ...
单片机c语言数字计数程序,如何使用单片机制作一个手动计数器
1．实验任务利用AT89S51单片机来制作一个手动计数器,在AT89S51单片机的P3.7管脚接一个轻触开关,作为手动计数的按钮,用单片机的P2.0-P2.7接一个共阴数码管,作为00-99计数的个 ...
Qt制作一个相册浏览工具
如何用Qt制作一个相册浏览的小程序? 程序开发思路如下: 1.支持多张相片浏览,可翻页浏览,相片可从本地导入; 2.相片要有放大和缩小的功能; 3.相片可自动浏览,时间间隔可自定义. 主要的代码如下: ...
手把手教你制作一个文件加密工具
目录一.前言二.思路 (1)加密算法的实现 (二)GUI等的实现三.代码实现一.前言现在,互联网上的安全问题越来越严重.我们的文件虽然有杀毒软件保护,但光使用杀毒软件也不是完全安全的.于是, ...
微信（小程序），怎么制作一个能够获取 “ 空气质量、温度、湿度、气压、风向 ” 等的【天气模块】
首先,制作天气模块,需要准备的资料可不少,开始进入正题吧! 步骤如下: 1.html+css布局 2.用微信小程序获取你当前所在的经纬度 3.根据地图API接口,将获取的经纬度解析成具体文字地址,如 ...
用Python制作一个文件解压缩工具
经常由于各种压缩格式的不一样用到文件的解压缩时就需要下载不同的解压缩工具去处理不同的文件,以至于桌面上的压缩工具就有三四种,于是使用python做了一个包含各种常见格式的文件解压缩的小工具. 常见的压 ...
如何制作一个微信小程序【微信小程序是怎么做的】
为什么现在这么多人使用微信小程序呢?因为微信小程序除了便捷易开发,公司企业可以用来做小程序展示官网,商家也可以做小程序商城,甚至个人也可以拥有自己的小程序.那么如何制作一个微信小程序?微信小程序是怎么 ...

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

开发步骤

功能开发

实现API

接口响应

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

最新文章

热门文章