[[403856]]

筆者最近一直在研究 前端可視化 和 搭建化 的技術, 最近也遇到一個非常有意思的課題, 就是基于設計稿自動提取圖片信息, 來智能化出碼. 當然本文并不會介紹很多晦澀難懂的技術概念, 我會從幾個實際應用場景出發, 介紹如何通過canvas圖像識取技術來實現一些有意思的功能. 最后會總結一些對智能化的思考以及對低代碼方向的規劃, 希望能對各位有所啟發.

canvas圖像識取技術

熟悉前端的朋友們也許對canvas并不陌生, 接下來我會帶大家去實現如下幾個應用場景, 來深入理解canvas圖像識取技術.

• 基于圖片動態生成網站主色和漸變色
• 基于圖片/設計稿一鍵生成網站配色方案
• 圖像識別技術方案

基于圖片動態生成網站主色和漸變色

也許有朋友會問, 基于圖片動態生成網站主色和漸變色, 它能解決什么問題呢? 又有怎樣的應用場景呢? 這里筆者舉幾個實際應用的例子.

網易云音樂大家也許不陌生, 細心的朋友也許可以觀察到, 網站banner部分的背景, 是不是很好的和banner形成很好的統一?

我們會發現, 每個輪播圖的背景都基于當前圖片顏色進行的漸變或模糊, 來實現和輪播圖實現完美的統一. 目還有還很多類似的例子, 比如圖片網站的背景, 圖片卡片的背景, 都應用了類似的技術.

實現原理

我們知道canvas對象有3個方法:

• createImageData() 創建新的、空白的 ImageData 對象
• getImageData() 返回 ImageData 對象，該對象為畫布上指定的矩形復制像素數據
• putImageData() 把圖像數據(從指定的 ImageData 對象)放回畫布上

為了分析圖片數據, 我們需要用到上述的第二個方法getImageData. ImageData 對象不是圖像，它規定了畫布上一個部分(矩形)，并保存了該矩形內每個像素的信息。對于 ImageData 對象中的每個像素，都存在著四元信息，即 RGBA 值：

• R - 紅色(0-255)
• G - 綠色(0-255)
• B - 藍色(0-255)
• A - alpha 通道(0-255; 0 是透明的，255 是完全可見的)

color/alpha 信息以數組形式存在，并存儲于 ImageData 對象的 data 屬性中。

有了以上的技術基礎, 我們就完全有可能提取到圖片的顏色信息, 并分析出圖片的主色了. 所以我們的實現流程如下:

實現的參考代碼如下:

img.onload = function () { 
    ctx.drawImage(img, 0, 0) 
    img.style.display = 'none' 
    // 獲取像素數據 
    let data = context.getImageData(0, 0, img.width, img.height).data 
    // ImageData.data 類型為Uint8ClampedArray的一維數組，每四個數組元素代表了一個像素點的RGBA信息，每個元素數值介于0~255 
    let r = 0, 
        g = 0, 
        b = 0 
         
    // 取所有像素平均值 
    for (let row = 0; row < img.height; row++) { 
        for (let col = 0; col < img.width; col++) { 
            r += data[(img.width * row + col) * 4] 
            g += data[(img.width * row + col) * 4 + 1] 
            b += data[(img.width * row + col) * 4 + 2] 
        } 
    } 
     
    // 計算平均值 
    r /= img.width * img.height 
    g /= img.width * img.height 
    b /= img.width * img.height 
 
    // 將結果取整 
    r = Math.round(r) 
    g = Math.round(g) 
    b = Math.round(b) 
     
    // 給背景設置漸變 
    bgBox.style.backgroundImage = `linear-gradient(rgb(${r}), rgb(${g}), rgb($)`; 
  } 

值得說明的是, 根據不同的區值場景, 我們還可以用到其他算法諸如:

• 平均值算法(獲取主色調)
• 中位切分法(獲取png圖片的主色)
• 互補色計算法

基于圖片/設計稿一鍵生成網站配色方案

以上介紹了使用canvas的取色方案, 接下來我們更進一步, 來探索一下如何基于圖片/設計稿一鍵生成網站配色方案.

其實基于以上的例子我們完全可以自己實現一套網站配色生成工具, 這里為了節約時間, 筆者推薦一款比較強大的插件, 來幫我們實現類似的功能.

沒錯, 就是colorthief, 它支持瀏覽器和node環境, 所以作為前端, 我們可以很輕松的使用它并獲取圖像/設計稿的配色方案.

github傳送門: 在線生成圖片色系方案庫

簡單的使用例子如下:

import ColorThief from './node_modules/colorthief/dist/color-thief.mjs' 
 
const colorThief = new ColorThief(); 
const img = document.querySelector('img'); 
 
if (img.complete) { 
  colorThief.getColor(img); 
} else { 
  image.addEventListener('load', function() { 
    colorThief.getColor(img); 
  }); 
} 

該庫還有很多細化的api,比如控制生成質量, 粒度等, 我們可以以用它做一些更加智能的工具.

圖像識別技術方案

圖像識別技術可以幫助技術人員利用計算機對圖像進行處理和分析，更好地識別各種不同模式的目標。圖像識別的過程和內容是比較多的，主要包括圖像預處理和圖像分割等內容，它在圖像處理中的有效應用，還能夠根據圖像的特點對其進行判斷匹配，讓用戶能夠更加快速的地在圖片中搜索自己想要獲取的信息。

了解神經網絡的朋友可能知道, 圖像識別技術真正的解決方案是 卷積神經網絡(CNNs或ConvNets).

從圖像識別技術的術語來說就是，卷積神經網絡按照關聯程度篩選不必要的連接，進而使圖像識別過程在計算上更具有可操作性。卷積神經網絡有意地限制了圖像識別時候的連接，讓一個神經元只接受來自之前圖層的小分段的輸入(假設是3×3或5×5像素)，避免了過重的計算負擔。因此，每一個神經元只需要負責處理圖像的一小部分。

當然作為前端工程師, 我們可能還涉及不到這么深的內容, 不過也不用擔心, 目前已有很多工具幫我們解決了底層的分析難題. 比如國內比較有名的imgcook, 通過識別技術來生成可被瀏覽器消費的html代碼.

其工作機制如下:

其底層識別技術也是基于對圖片信息元的分析, 提取和轉化, 來實現智能化編排的目的. 當然也有一些開源的庫可以幫我們做到一定程度的識別能力. 我們可以基于這些方案, 制作一些對開發更智能化的工具.

這里筆者提一個圖片識別的庫GOCR.js, 供大家參考學習.

GOCR.js 是 GOCR(開源的 OCR 光學識別程序)項目的純 JavaScript 版本，使用 Emscripten 進行自動轉換。這是一個簡單的 OCR (光學字符識別)程序，可以掃描圖像中的文字回文本。

該庫的使用也非常簡單, 我們只需要引入該庫, 輸入如下代碼即可:

var string = GOCR(image); 
alert(string); 

演示如下:

chrome-capture (1).gif(原圖)

智能化思考

最近幾年國內外lowcode和nocode平臺發展迅猛, 對于基礎的搭建化已不能滿足科技企業的需求, 智能化/自動化搭建平臺不斷涌現. 筆者之前文章 分享10款2021年國外頂尖的lowcode開發平臺 也介紹過很多國外的優秀lowcode平臺, 很多也對智能化有了很多的實踐落地. 筆者簡化如下:

最近H5-Dooring可視化編輯器也在持續推迭代, 數據源已基本搭建完成, 后續還會按照更智能化的方向, 可視化大屏V6.Dooring也已上線第一個版本.

國內lowcode平臺仍然有很長的路要走, 期待大家一起努力??!

本文轉載自微信公眾號「趣談前端」，可以通過以下二維碼關注。轉載本文請聯系趣談前端公眾號。