小程序记4：有6个最常用的小程序图片API，但是第3个很少人知道！

小程序的图片处理是一个很常用的技术，一般用于生成分享裂变图，比如大家都被刷过的朋友圈的分享图。

但是很少人知道，小程序图片处理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转化为本地临时图片；

三、源码可下载：

链接：https://pan.baidu.com/s/1l2WOB5CTqKqDdrqcWPJyQw

密码：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快速开发仿慕课网在线教育平台》