用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

02年湖人vs国王系列赛:小程序圖像處理:圖片配色分析

湖人vs爵士季后赛 www.nbgeh.club Rolan 2019-12-2 00:10

背景 小程序的canvas是微信基于原生組件自行封裝的,因此接口跟web的canvas有不少區別,早期更是沒有支持像素級的處理能力。 在18年初的小程序基礎庫1.9.0版本更新中,出現了wx.canvasGetImageData和wx.canvasPutIma ...

背景

湖人vs爵士季后赛的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空間
收藏
原作者: 胖胖二師兄 來自: 掘金
七乐彩复式投注速查表 吉林时时彩连线走势 赚钱门槛最低的藏宝阁游戏 在深圳卖水果赚钱吗 怎么利用支付宝怎么赚钱 脉动棋牌游戏下载 北京pk10赛车开结果 广西十一选五开奖预测 蝌蚪娱乐平台 还能在网上购买彩票吗 刮刮乐吧 天天棋牌游戏下载大全 友乐短视频可以赚钱吗 15选5杀号精确科学 福利彩票华东15选5 赚钱最快的偏门