【小程序】小程序圖像處理：圖片配色分析

xbynet 發布于2019-08-26 12:21 / 2763人閱讀

摘要：在年初的小程序基礎庫版本更新中，出現了和兩個重要的，補全了像素處理能力，因此，小程序在客戶端進行圖片處理成為了可能。

背景

小程序的canvas是微信基于原生組件自行封裝的，因此接口跟web的canvas有不少區別，早期更是沒有支持像素級的處理能力。
在18年初的小程序基礎庫1.9.0版本更新中，出現了wx.canvasGetImageData和wx.canvasPutImageData兩個重要的API，補全了像素處理能力，因此，小程序在客戶端進行圖片處理成為了可能。
具體可以參考：
偷偷迭代的重磅功能---小程序的像素處理能力
wx.canvasGetImageData

圖片配色分析小程序：小色卡

為了嘗試小程序的圖像處理能力，我做了個用于圖片配色分析的小程序-小色卡。
功能主要是：用戶選擇一張圖片，程序會分析圖片的配色，并把配色展示為一張色卡給用戶。用戶可以保存、編輯、復制自己的色卡。這個功能對初級的UI設計師有一定的幫助（可能吧...）。
源碼：github：mini-color-card
體驗小程序：

原理

小程序實現配色分析主要步驟如下：

用戶選擇圖片，拿到imgPath后繪制到canvas上。

通過wx.canvasGetImageData這個接口讀取圖片數據

對圖片數據進行預處理，剔除alpha比較小并且不是白色的點。（非必要）

對圖片像素數據進行聚類。每個像素的顏色可以作為一個三維向量來看。

基本邏輯如下：

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，濾鏡之類的圖像處理應該都是可以做了。小程序的想象空間還是挺大的。

GPU云服務器云服務器小程序滾動到圖片js 小程序云服務器中毒怎么處理小程序小程序小程序附近小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108543.html

優秀文章收藏（慢慢消化）持續更新~

摘要：整理收藏一些優秀的文章及大佬博客留著慢慢學習原文協作規范中文技術文檔協作規范阮一峰編程風格凹凸實驗室前端代碼規范風格指南這一次，徹底弄懂執行機制一次弄懂徹底解決此類面試問題瀏覽器與的事件循環有何區別筆試題事件循環機制異步編程理解的異步 better-learning 整理收藏一些優秀的文章及大佬博客留著慢慢學習原文:https://www.ahwgs.cn/youxiuwenzhan...

JeOam 2019-08-23 18:24 評論0 收藏0
微信小程序Markdown、HTML解析庫（支持wepy）

摘要：是一個可將轉為微信小程序的渲染庫。用于解決在微信小程序中不能直接渲染的問題。依賴環境需要環境。已經安裝請忽略安裝接口使用轉轉轉數據轉數據示例將添加為小程序工程再克隆到目錄使用小程序開發工具編譯即可 Towxml Towxml 是一個可將HTML、Markdown轉為微信小程序WXML(WeiXin Markup Language)的渲染庫。用于解決在微信小程序中Markdown、HT...

stefanieliang 2019-08-22 16:40 評論0 收藏0
微信小程序Markdown、HTML解析庫（支持wepy）

摘要：是一個可將轉為微信小程序的渲染庫。用于解決在微信小程序中不能直接渲染的問題。依賴環境需要環境。已經安裝請忽略安裝接口使用轉轉轉數據轉數據示例將添加為小程序工程再克隆到目錄使用小程序開發工具編譯即可 Towxml Towxml 是一個可將HTML、Markdown轉為微信小程序WXML(WeiXin Markup Language)的渲染庫。用于解決在微信小程序中Markdown、HT...

GeekQiaQia 2019-08-29 15:10 評論0 收藏0
收集整理適用博客建站免費開源Wordpress主題-簡約好看的WP主題

摘要：最重要的就是找一個適合自己的主題了。事實上，免費主題也非常多，而且很多的免費主題在功能上和界面美觀上已經大大超過了付費的主題。加上這些主題都是開源的，基本上可以在上找得到源碼，安全性是沒有問題，主題的作者也在不斷更新當中。WordPress最重要的就是找一個適合自己的主題了。好一點的WordPress主題基本上都是要收費的，而且價格還不便宜，這導致了不少的新手朋友們很為難。而有時我們僅僅根據...

番茄西紅柿 2021-07-30 14:57 評論0 收藏2637
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

xiaokai 2019-08-01 18:21 評論0 收藏0