摘要:關于的介紹關于的介紹處理數據并轉換為在上邊我們拿到了一個一維數組,接下來就是將它處理為更合理的結構。如果計算出來這一塊面積就成為了一個問題目前的思路是,將數組轉換為二維數組,而不是單純的在對象中用標識。
最近突然想做一些好玩的東西,找來找去,想到了之前曾經在網上看到過有人用box-shadow畫了一副蒙娜麗莎出來前言 在線地址:
感覺這個挺有意思,正好趁著周末,自己也搞一波
優化前的版本
優化后的版本
源碼倉庫地址
不建議上傳大圖片。。喜歡聽電腦引擎聲的除外
首先,并不打算單純的實現某一張圖片(這樣太沒意思了),而是通過上傳圖片,來動態生成box-shadow的數據。
所以,你需要了解這些東西:
box-shadow
canvas
box-shadowbox-shadow可以讓我們針對任意一個html標簽生成陰影,我們可以控制陰影的偏移量、模糊半徑、實際半徑、顏色等一系列屬性。
語法如下:
selector { /* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | offset-x | offset-y | color */ box-shadow: inset 5em 1em gold; /* Any number of shadows, separated by commas */ box-shadow: 3px 3px red, -1em 0 0.4em olive; }
這里是MDN的box-shadow描述,里邊有一些示例。
canvas是的,我們還需要canvas,因為我們需要將圖片資源轉存到canvas中,再生成我們實際需要的數據格式。
在這里并不會拿canvas去做渲染之類的,單純的是要利用canvas的某些API。
剛開始的規劃大致是這樣的:
我們上傳一張圖片
創建一個Image對象接收上傳的圖片資源
將Image對象放入canvas中
通過canvas生成圖片文件對應的rgba數據
處理rgba數據轉換為box-shadow屬性
done
如何接收圖片文件數據我們在監聽input[type="file"]的change事件時,可以在target里邊拿到一個files的對象。
該對象為本次上傳傳入的文件列表集合,一般來說我們取第一個元素就是了。
我們拿到了一個File類型的對象,接下來就是用Image來接收這個File對象了。
這里會用到一個瀏覽器提供的全局對象URL,URL提供了一個createObjectURL的方法。
方法接收一個Blob類型的參數,而File則是繼承自Blog,所以我們直接傳入就可以了。
然后再使用一個Image對象進行接收就可以了:
$input.addEventListener("change", ({target: {files: [file]}}) => { let $img = new Image() $img.addEventListener("load", _ => { console.log("we got this image") }) $img.src = URL.createObjectURL(file) })
MDN關于URL.createObjectURL的介紹通過canvas獲取我們想要的數據
canvas可以直接渲染圖片到畫布中,可以是一個Image對象、HTMLImageElement及更多媒體相關的標簽對象。
所以我們上邊會把數據暫存到一個Image對象中去。
我們在調用drawImage時需要傳入x、y、width、height四個參數,前兩個必然是0了,關于后邊兩個屬性,正好當我們的Image對象加載完成后,直接讀取它的width和height就是真實的數據:
let context = $canvas.getContext("2d") $img.addEventListener("load", _ => { context.drawImage($img, 0, 0, $img.width, $img.height) })
當我們把圖片渲染至canvas后,我們可以調用另一個API獲取rgba相關的數據。
getImageData我們調用getImageData會返回如下幾個參數:
data
width
height
data為一個數組,每相鄰的四個元素為一個像素點的rgba描述。
一個類似這樣結構的數組:[r, g, b, a, r, g, b, a]。
MDN關于context.drawImage的介紹處理rgba數據并轉換為box-shadow
MDN關于context.getImageData的介紹
在上邊我們拿到了一個一維數組,接下來就是將它處理為更合理的結構。
P.S. 一維數組是從左到右從上到下排列的,而不是從上到下從左到右
我們可以發現,width與height相乘正好是data數組的length。
而數組的順序則是先按照x軸進行增加的,所以我們這樣處理得到的數據:
function getRGBA (pixels) { let results = [] let {width, height, data} = pixels for (let i = 0; i < data.length / 4; i++) { results.push({ x: i % width | 0, y: i / width | 0, r: data[i * 4], g: data[i * 4 + 1], b: data[i * 4 + 2], a: data[i * 4 + 3] }) } return results }
我們將length除以4作為循環的最大長度,然后在生成每個像素點的描述時
通過當前下標對圖片寬度取余得到當前像素點在圖片中的x軸下標
通過當前下標對圖片寬度取商得到當前像素點在圖片中的y軸下標
同時塞入rgba四個值,這樣我們就會拿到一個類似這樣結構的數據:
[{ x: 0, y: 0, r: 255, g: 255, b: 255, a: 255 }]將數據生成為box-shadow格式的數據
box-shadow是支持多組屬性的,兩組屬性之間使用,進行分割。
所以,我們拿到上邊的數據以后,直接遍歷拼接字符串就可以生成我們想要的結果:
let boxShadow = results.map(item => `${item.x}px ${item.y}px rgba(${item.r}, ${item.g}, ${item.b}, ${item.a})` ).join(",")
效果圖:
雖說這樣就做出來了,但是對瀏覽器來說太不友好了。因為是每一個像素點對應的一個box-shadow屬性。
好奇的童鞋可以選擇F12檢查元素查看該div。(反正蘋果本是扛不住)
所以為了我們能夠正常使用F12,我們下一步的操作就是合并相鄰同色值的box-shadow,減少box-shadow屬性值的數量。
雖說圖片可能是由各種顏色不規則的組合而成,但畢竟還是會有很多是重復顏色的。
所以我們要計算出某一種顏色可合并的最大面積。
針對某一種顏色,用表格表示可能是這樣的:
就像在圖中所示,我們最理想的合并方式應該是這樣的 (radius的取值意味著我們只能設置一個正方形):
于是。。如果計算出來這一塊面積就成為了一個問題-.-
目前的思路是,將數組轉換為二維數組,而不是單純的在對象中用x、y標識。
所以,我們對處理數組的函數進行如下修改:
function getRGBA (pixels) { let results = [] let {width, height, data} = pixels for (let i = 0; i < data.length / 4; i++) { let x = i % width | 0 let y = i / width | 0 let row = results[y] = results[y] || [] row[x] = { rgba: `${data.slice(i * 4, i * 4 + 4)}` // 為了方便后續的對比相同顏色,直接返回一個字符串 } } return results }
這時我們就能得到一個按照x、y排列的二維數組,下一步的操作就是以任意點為原點,進行匹配周圍的cell。
參考上邊的表格示例,我們會拿到一個類似這樣的數據 (僅作示例):
[ [1, 1, 1, 1, 1, 1], [1, 1, 1, 1], [1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1], [1, 1], [1, 1, 1, 1, 1, 1], ]獲取可合并的最大半徑
目前采用的是遞歸的方式,從0,0原點處開始搜索,獲取當前原點的色值,然后與周圍進行比較,獲取一個最大半徑的正方形:
/** * 根據給定范圍獲取匹配當前節點的正方形 * @param {Array} matrix 二維矩陣數組 * @param {Object} tag 當前要匹配的節點 * @param {Number} [startRowIndex=0] 開始的行下標,默認為1 * @param {Number} [startColIndex=0] 開始的列下標,默認為1 * @return {Number} 返回一個最小范圍 */ function range (matrix, tag, startRowIndex = 0, startColIndex = 0) { let results = [] rows: for (let rowIndex = startRowIndex; rowIndex < matrix.length; rowIndex++) { let row = matrix[rowIndex] for (let colIndex = startColIndex; colIndex < row.length; colIndex++) { let item = row[colIndex] if (item.rgba !== tag.rgba) { if (colIndex === startColIndex) { break rows // 這個表示在某一行的第一列就匹配失敗了,沒有必要再進行后續的匹配,直接`break`到最外層 } else { results.push(colIndex - startColIndex) break // 將當前下標放入集合,終止當前循環 } } else if (colIndex === row.length - 1) { results.push(colIndex - startColIndex) // 這里表示一整行都可以與當前元素匹配 } } } // 對所有的x、y軸的值進行比較獲取最小的值 let count = Math.min.apply(Math, [results.length].concat(results)) return count }
函數會從起點開始按順序遍歷所有的元素,在遇到不匹配的節點后,就會break進入下次循環,并將當前的下標存入數組中。
在遍歷完成后,我們將數組所有的item以及數組的長度(可以認為是y軸的值)一同放入Math.min獲取一個最小的值。
這個最小的值就是我們以當前節點為原點時可以生成的最大范圍的正方形了。
P.S. 這個計算方式并不是很好,還不夠靈活
因為上邊也只是合并了一個正方形,還會剩下很多面積沒有被查看。
所以我們用遞歸的方式來計算剩余面積,在第一次匹配結束后,是大概這個樣子的:
所以我們在遞歸處拆分出了兩塊會有重復數據的面積:
以及之后的遞歸也是參照這個樣子來的,這樣能保證所有的節點都會被照顧到,不會漏掉。(如果有更好的方式,求回復)。
這樣配合著前邊拿到的半徑數據,很輕松的就可以組裝出合并后的集合,下一步就是將其渲染到DOM中了。
渲染到box-shadow中現在我們已經拿到了想要的數據,關于生成box-shadow屬性處我們也要進行一些修改,之前因為是一個像素對應一個屬性值,但是現在做了一些合并,所以,生成屬性值的操作大概是這個樣子的:
$output.style.boxShadow = results.map(item => `${item.x}px ${item.y}px 0px ${item.radius}px rgba(${item.target.rgba})` ).join(",")
P.S. x和y的值必須要加上半徑的值,否則會出現錯位,因為box-shadow是從中心開始渲染的,而不是左上角
完成后的效果對比原圖&兩種實現方式的效果對比:
我們拿合并前后生成的CSS存為了文件,并查看了文件大小,效果在一些背景不是太復雜的圖片上還是很明顯的,減少了2/3左右的體積。
如果將rgba替換為hex,還會再小一些
現在再進行檢查元素不會崩潰了,但是依然會卡:)
參考資料box-shadow
drawImage
getImageData
createObjectURL
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95112.html
摘要:面試如何防騙一份優秀的前端開發工程師簡歷是怎么樣的作為,有哪些一般人我都告訴他,但是他都不聽的忠告如何面試前端工程師 更多資源請Star:https://github.com/maidishike... 文章轉自:https://github.com/jsfront/mo... 3月份前端資源分享 1. Javascript 使用judge.js做信息判斷 javascript...
摘要:引言重回手寫編輯器系列。現在節點不匹配時性能已經最優,那下一步就是如何優化匹配時的性能,這時就用到節點緩存。更多討論討論地址是精讀手寫編譯器性能優化之緩存如果你想參與討論,請點擊這里,每周都有新的主題,周末或周一發布。 1 引言 重回 手寫 SQL 編輯器 系列。這次介紹如何利用緩存優化編譯器執行性能。 可以利用 Frist 集 與 Match 節點緩存 這兩種方式優化。 本文會用到一...
摘要:萬圣節到了,寫一個小例子了解一下畫圖方法,可以實現一些有趣的效果,動畫實現。移動路徑方法把路徑移動到畫布中指定點,不創建線條。實現初始畫布顯示文字萬圣節快樂閃電打雷反轉畫布重置畫布總結萬圣節快樂 萬圣節到了,寫一個小例子了解一下canvas畫圖方法,canvas可以實現一些有趣的效果,動畫實現。以一個簡單的頁面實現了解一下基礎的畫圖方法。原文鏈接 canvas可以實現一些有趣的效果,動...
摘要:無論你是博客發燒友,還是項目開發小組,或是造輪子達人。只要你需要寫文檔,而且需要產生出一套漂亮的頁面。那么再適合不過了啄木鳥類似于,但是它生成的頁面具有單頁的性能,同時兼顧服務器渲染,滿足搜索引擎爬取。 無論你是博客發燒友,還是項目開發小組,或是造輪子達人。只要你需要寫文檔(markdown),而且需要產生出一套漂亮的頁面。那么Picidae再適合不過了... showImg(http...
閱讀 3323·2021-11-22 12:04
閱讀 2706·2019-08-29 13:49
閱讀 482·2019-08-26 13:45
閱讀 2238·2019-08-26 11:56
閱讀 998·2019-08-26 11:43
閱讀 587·2019-08-26 10:45
閱讀 1266·2019-08-23 16:48
閱讀 2157·2019-08-23 16:07