Canvas圖像識取技術以及智能化設計的思考
筆者最近一直在研究 前端可視化 和 搭建化 的技術, 最近也遇到一個非常有意思的課題, 就是基于設計稿自動提取圖片信息, 來智能化出碼. 當然本文并不會介紹很多晦澀難懂的技術概念, 我會從幾個實際應用場景出發, 介紹如何通過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(${b})`;
- }
值得說明的是, 根據不同的區值場景, 我們還可以用到其他算法諸如:
- 平均值算法(獲取主色調)
- 中位切分法(獲取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);
演示如下:
智能化思考
最近幾年國內外lowcode和nocode平臺發展迅猛, 對于基礎的搭建化已不能滿足科技企業的需求, 智能化/自動化搭建平臺不斷涌現. 筆者之前文章 分享10款2021年國外頂尖的lowcode開發平臺 也介紹過很多國外的優秀lowcode平臺, 很多也對智能化有了很多的實踐落地. 筆者簡化如下:
最近H5-Dooring可視化編輯器也在持續推迭代, 數據源已基本搭建完成, 后續還會按照更智能化的方向, 可視化大屏V6.Dooring也已上線第一個版本.
國內lowcode平臺仍然有很長的路要走, 期待大家一起努力??!
本文轉載自微信公眾號「趣談前端」，可以通過以下二維碼關注。轉載本文請聯系趣談前端公眾號。
