小程序的图片处理是一个很常用的技术，一般用于生成分享裂变图，比如大家都被刷过的朋友圈的分享图。
但是很少人知道，小程序图片处理API还可以做滤镜效果，本文就给大家介绍一下这几个常用的API。
一、为了讲清楚这几个API的功能，给大家做了个小应用，作为实战过程
这个小应用的功能包括：
1）选择本地图片
2）获取此图片信息
3）将此图片绘制到画布上（Canvas）
4）获取画布上图片的像素信息，然后进行灰白滤镜处理
5）将处理后的灰白图片保存到本地
效果预览：微信搜索“程序盒子Store”>找到“Canvas图片灰白滤镜”
二、这几个API分别是：
1）wx.getImageInfo
获取图片信息，比如宽、高、类型，
倘若为网络图片，需先配置download域名才能生效；
2）wx.chooseImage
选择本地图片，一般用于图片上传，
对于图片的处理，是不需要后台的，只通过前端就可以实现小程序的读取、处理和保存；
3）wx.canvasGetImageData
返回一个数组，用来描述 Canvas 区域隐含的像素数据。根据这些像素数据，我们就可以做一些像素处理，也就是滤镜效果。一般结合 wx.canvasPutImageData 使用；
4）wx.canvasPutImageData
将像素数据绘制到画布的方法。就是将处理完的像素数据重新设置到画布中，实现滤镜效果；
5）wx.saveImageToPhotosAlbum
将Canvas图片保存到本地；
6）wx.canvasToTempFilePath
将Canvas转化为本地临时图片；
三、源码可下载：
密码：8tj6
四、附源码：
ci.js
/**
* canvas 图片处理
*/
var util = require("../../utils/util.js");
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//分享
wx.showShareMenu({
withShareTicket: true
});
},
//处理图片：灰色并反转颜色
filterImage: function (src) {
var canvasId = 'myCanvas';
//获取图片信息
wx.getImageInfo({
src: src,
success: res => {
var width = 250;
var height = 250;
//创建canvas 上下文
var context = wx.createCanvasContext(canvasId);
context.drawImage(src, 0, 0, width, height);
//画图到canvas上
context.draw(true, res => {
//获取canvas图片数据
wx.canvasGetImageData({
canvasId: canvasId,
width: width,
height: height,
success: res => {
var data = res.data;
//滤镜一：转换灰度图
for (var i = 0; i < data.length; i += 4) {
var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = avg;
data[i + 1] = avg;
data[i + 2] = avg;
}
//滤镜二：反转rgba
// for (var i = 0; i < data.length; i += 4) {
// data[i] = 255 - data[i];
// data[i + 1] = 255 - data[i + 1];
// data[i + 2] = 255 - data[i + 2];
// }
//重新设置canvas data，实现滤镜
wx.canvasPutImageData({
canvasId: canvasId,
data: data,
width: width,
height: height
});
}
});
});
}
})
},
//选择图片
selectImage: function () {
wx.chooseImage({ //选择图片
count: 1,
success: res => {
this.filterImage(res.tempFilePaths[0]);//滤镜处理
}
})
},
//保存图片
saveImage: function () {
var width = 250;
var height = 250;
wx.canvasToTempFilePath({
destWidth: width,
destHeight: height,
width: width,
height: height,
canvasId: 'myCanvas',
success: function (res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: res => {
wx.showToast({
title: '已保存到相册',
icon: 'success',
duration: 2000
});
}
});
}
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
}
})
ci.wxml
<view class="header">
<view class="header-title"> Canvas图片灰白滤镜</view>
<view class="header-subtitle">选择手机图片、黑白滤镜、保存图片</view>
</view>
<view class="container">
<canvas canvas-id="myCanvas" class="myCanvas">
</canvas>
<view class="btn-view">
<button style='margin-top:10rpx;' type='primary' bindtap='selectImage'>选择图片</button>
<button style='margin-top:10rpx;' type='default' bindtap='saveImage'>保存图片</button>
</view>
</view>
ci.wxss
.container{
margin-top: 20px;
}
.myCanvas{
border: 1px solid #CCC;
height: 250px;
width: 250px;
}
.btn-view{
display: flex;
flex-direction: row;
justify-content: center;
}
.btn-view button{
margin: 0px 5rpx;
}
欢迎关注视频课程：《Java SSM快速开发仿慕课网在线教育平台》
随时随地看视频
