使用box-shadow進行畫圖(性能優化終結者)

最近突然想做一些好玩的東西，找來找去，想到了之前曾經在網上看到過有人用box-shadow畫了一副蒙娜麗莎出來
感覺這個挺有意思，正好趁著周末，自己也搞一波

前言

線上地址：

優化前的版本
優化後的版本
源碼倉庫地址

不建議上傳大圖片。。喜歡聽電腦引擎聲的除外

首先，並不打算單純的實現某一張圖片（這樣太沒意思了），而是通過上傳圖片，來動態生成box-shadow的數據。
所以，你需要瞭解這些東西：

1. box-shadow
2. canvas

box-shadow

box-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。

首版規劃

剛開始的規劃大致是這樣的：

1. 我們上傳一張圖片
2. 創建一個Image對象接收上傳的圖片資源
3. 將Image對象放入canvas中
4. 通過canvas生成圖片文件對應的rgba數據
5. 處理rgba數據轉換為box-shadow屬性
6. 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會返回如下幾個參數：

1. data
2. width
3. height

data為一個數組，每相鄰的四個元素為一個像素點的rgba描述。
一個類似這樣結構的數組：[r, g, b, a, r, g, b, a]。

MDN關於context.drawImage的介紹
MDN關於context.getImageData的介紹

處理rgba數據並轉換為box-shadow

在上邊我們拿到了一個一維數組，接下來就是將它處理為更合理的結構。
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