Canvas圖像識取技術(shù)以及智能化設(shè)計的思考

作者：徐小夕 2021-06-05 20:49:15

熟悉前端的朋友們也許對canvas并不陌生, 接下來我會帶大家去實現(xiàn)如下幾個應(yīng)用場景, 來深入理解canvas圖像識取技術(shù)。

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

canvas圖像識取技術(shù)

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

基于圖片動態(tài)生成網(wǎng)站主色和漸變色
基于圖片/設(shè)計稿一鍵生成網(wǎng)站配色方案
圖像識別技術(shù)方案

基于圖片動態(tài)生成網(wǎng)站主色和漸變色

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

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

我們會發(fā)現(xiàn), 每個輪播圖的背景都基于當前圖片顏色進行的漸變或模糊, 來實現(xiàn)和輪播圖實現(xiàn)完美的統(tǒng)一. 目還有還很多類似的例子, 比如圖片網(wǎng)站的背景, 圖片卡片的背景, 都應(yīng)用了類似的技術(shù).

實現(xiàn)原理

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

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

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

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

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

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

實現(xiàn)的參考代碼如下:

img.onload = function () { 
    ctx.drawImage(img, 0, 0) 
    img.style.display = 'none' 
    // 獲取像素數(shù)據(jù) 
    let data = context.getImageData(0, 0, img.width, img.height).data 
    // ImageData.data 類型為Uint8ClampedArray的一維數(shù)組，每四個數(shù)組元素代表了一個像素點的RGBA信息，每個元素數(shù)值介于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 
 
    // 將結(jié)果取整 
    r = Math.round(r) 
    g = Math.round(g) 
    b = Math.round(b) 
     
    // 給背景設(shè)置漸變 
    bgBox.style.backgroundImage = `linear-gradient(rgb(${r}), rgb(${g}), rgb($)`; 
  }

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

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

基于圖片/設(shè)計稿一鍵生成網(wǎng)站配色方案

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

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

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

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,比如控制生成質(zhì)量, 粒度等, 我們可以以用它做一些更加智能的工具.

圖像識別技術(shù)方案

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

了解神經(jīng)網(wǎng)絡(luò)的朋友可能知道, 圖像識別技術(shù)真正的解決方案是卷積神經(jīng)網(wǎng)絡(luò)(CNNs或ConvNets).

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

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

其工作機制如下:

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

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

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

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

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

演示如下:

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

智能化思考

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