使用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