用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

小程序图像处理:图片配色分析

Rolan 2019-12-2 00:10

背景 小程序的canvas是微信基于原生组件自行封装的,因此接口跟web的canvas有不少区别,早期更是没有支持像素级的处理能力。 在18年初的小程序基础库1.9.0版本更新中,出现了wx.canvasGetImageData和wx.canvasPutIma ...

背景

小程序的canvas是微信基于原生组件自行封装的,因此接口跟web的canvas有不少区别,早期更是没有支持像素级的处理能力。
在18年初的小程序基础库1.9.0版本更新中,出现了wx.canvasGetImageData和wx.canvasPutImageData两个重要的API,补全了像素处理能力,因此,小程序在客户端进行图片处理成为了可能。
具体可以参考:
偷偷迭代的重磅功能---小程序的像素处理能力
wx.canvasGetImageData

图片配色分析小程序:小色卡

为了尝试小程序的图像处理能力,我做了个用于图片配色分析的小程序-小色卡。
功能主要是:用户选择一张图片,程序会分析图片的配色,并把配色展示为一张色卡给用户。用户可以保存、编辑、复制自己的色卡。这个功能对初级的UI设计师有一定的帮助(可能吧...)。
源码:github:mini-color-card
体验小程序:

原理

小程序实现配色分析主要步骤如下:

  1. 用户选择图片,拿到imgPath后绘制到canvas上。
  2. 通过wx.canvasGetImageData这个接口读取图片数据
  3. 对图片数据进行预处理,剔除alpha比较小并且不是白色的点。(非必要)
  4. 对图片像素数据进行聚类。每个像素的颜色可以作为一个三维向量来看。

基本逻辑如下:

wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: (res) => {
    wx.getImageInfo({
      src: res.tempFilePaths[0],
      success: (imgInfo) => {
        let {
          width,
          height,
          imgPath
        } = imgInfo;
        let ctx = wx.createCanvasContext(this.canvasID);
        ctx.drawImage(imgPath,0,0,width,height);
        ctx.draw(false,()=>{
          wx.canvasGetImageData({
            canvasId: this.canvasID,
            x: 0,
            y: 0,
            width: width,
            height: height,
            success(res) {
              var pixels = res.data;
              var pixelCount = width*height;
              var pixelArray = [];
              // 对像素数据进行预处理
              for (var i = 0, offset, r, g, b, a; i < pixelCount; i = i + quality) {
                offset = i * 4;
                r = pixels[offset + 0];
                g = pixels[offset + 1];
                b = pixels[offset + 2];
                a = pixels[offset + 3];
                if (a >= 125) {
                  if (!(r > 250 && g > 250 && b > 250)) {
                    pixelArray.push([r, g, b]);
                  }
                }
              }
              var cmap = MMCQ.quantize(pixelArray, colorCount);//聚类,MMCQ是个用于图像分析的库
              var palette = cmap ? cmap.palette() : null;
              console.log('配色为:',palette);
            }
          })
        })
      }
    })
  }
})
复制代码

小结

一开始我是不想把canvas显示出来的,只想用它获取图像内容,但是实践下来是不可行的。小程序的canvas并不允许离屏渲染,想要用它进行图片处理,就要老老实实用它进行展示。
这里只实践了wx.canvasGetImageData读取数据进行图像分析,不过结合wx.canvasPutImageData,滤镜之类的图像处理应该都是可以做了。小程序的想象空间还是挺大的。

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 胖胖二师兄 来自: 掘金