微信小程序—使用canvas实现图片打码（马赛克）功能

效果体验

实现思路

1、canvas绘制图片
2、等分画布为（n*m）个小正方形
3、利用wx.canvasGetImageData获得canvas中像素点的色值
4、遍历每个小正方形，取得小正方形内随机色值
5、将随机色值替换小正方形的个点色值
6、利用wx.canvasPutImageData将新的色值列表赋值给canvas

代码逻辑

js

// miniprogram/pages/index/pages/mosaic/mosaic.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ctx: '',
    isHasMosaic:false,
    imageUrl: 'cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/1022324.jpg'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    let ctx = wx.createCanvasContext('myCanvas')
    that.setData({
      ctx: ctx
    })
    wx.getImageInfo({
      src: that.data.imageUrl,
      success: function (res) {
        that.data.ctx.drawImage(res.path, 0, 0, 240, 380)
        that.data.ctx.draw()
      }
    })
  },

  chooseImage(){
    var that = this
    wx.chooseImage({
      success: function(res) {
        that.setData({
          imageUrl:res.tempFilePaths[0]
        })
        wx.getImageInfo({
          src: that.data.imageUrl,
          success: function (res) {
            that.data.ctx.drawImage(res.path, 0, 0, 240, 380)
            that.data.ctx.draw()
          }
        })
      },
    })
  },
  addMosaic(){
    var that = this
    if (that.data.isHasMosaic) {
      return
    }
    that.data.isHasMosaic = true
    var num = 10;
    //等分画布
    var stepW = 240 / num;
    var stepH = 380 / num;
    wx.canvasGetImageData({
      canvasId: 'myCanvas',
      x: 0,
      y: 0,
      width: 240,
      height: 380,
      success(res) {
        for (var i = 0; i < stepH; i++) {
          for (var j = 0; j < stepW; j++) {
            //获取一个小方格的随机颜色，这是小方格的随机位置获取的
            var color = that.getXY(res, j * num + Math.floor(Math.random() * num), i * num + Math.floor(Math.random() * num));
            //这里是循环小方格的像素点，
            for (var k = 0; k < num; k++) {
              for (var l = 0; l < num; l++) {
                //设置小方格的颜色
                that.setXY(res, j * num + l, i * num + k, color);
              }
            }
          }
        }
        wx.canvasPutImageData({
          canvasId: 'myCanvas',
          data: res.data,
          x: 0,
          y: 0,
          width: 240,
          height: 380
        })
      }
    })
  },
  getXY(obj, x, y) {
    var w = obj.width;
    var h = obj.height;
    var d = obj.data;
    var color = [];
    color[0] = obj.data[4 * (y * w + x)];
    color[1] = obj.data[4 * (y * w + x) + 1];
    color[2] = obj.data[4 * (y * w + x) + 2];
    color[3] = obj.data[4 * (y * w + x) + 3];
    return color;
  },
  setXY(obj, x, y, color) {
    var w = obj.width;
    var h = obj.height;
    var d = obj.data;
    obj.data[4 * (y * w + x)] = color[0];
    obj.data[4 * (y * w + x) + 1] = color[1];
    obj.data[4 * (y * w + x) + 2] = color[2];
    obj.data[4 * (y * w + x) + 3] = color[3];
  },
  clearMosaic(){
    var that = this
    if (!that.data.isHasMosaic) {
      return
    }
    that.data.isHasMosaic = false
    wx.getImageInfo({
      src: that.data.imageUrl,
      success: function (res) {
        that.data.ctx.drawImage(res.path, 0, 0, 240, 380)
        that.data.ctx.draw()
      }
    })
  }
})

wxml代码

<!--miniprogram/pages/index/pages/mosaic/mosaic.wxml-->
<view class="page">
  <view class="view-row" style="color:#aaa;font-size:36rpx;margin:30rpx;border-bottom:1rpx solid #aaa;padding:10rpx">canvas添加马赛克</view>
  <canvas class="canvas" style="margin-top:30rpx" canvas-id="myCanvas" disable-scroll="true" bindtap="chooseImage">
  </canvas>
  <view class="view-row" style="margin-top:50rpx">
  <button style="width:200rpx" bindtap="addMosaic">添加</button>
  <button style="width:200rpx" bindtap="clearMosaic">清除</button>
  </view>
</view>

wcss代码

.page {
  margin: 0rpx 50rpx 50rpx 50rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.canvas {
    width: 240px;
    height: 380px;
    background: #eee
}
.view-row{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}