摘要：關(guān)于的介紹關(guān)于的介紹處理數(shù)據(jù)并轉(zhuǎn)換為在上邊我們拿到了一個(gè)一維數(shù)組，接下來就是將它處理為更合理的結(jié)構(gòu)。如果計(jì)算出來這一塊面積就成為了一個(gè)問題目前的思路是，將數(shù)組轉(zhuǎn)換為二維數(shù)組，而不是單純的在對(duì)象中用標(biāo)識(shí)。

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

優(yōu)化前的版本
優(yōu)化后的版本
源碼倉庫地址

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

首先，并不打算單純的實(shí)現(xiàn)某一張圖片（這樣太沒意思了），而是通過上傳圖片，來動(dòng)態(tài)生成box-shadow的數(shù)據(jù)。
所以，你需要了解這些東西：

box-shadow

canvas

box-shadow可以讓我們針對(duì)任意一個(gè)html標(biāo)簽生成陰影，我們可以控制陰影的偏移量、模糊半徑、實(shí)際半徑、顏色等一系列屬性。
語法如下：

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，因?yàn)槲覀冃枰獙D片資源轉(zhuǎn)存到canvas中，再生成我們實(shí)際需要的數(shù)據(jù)格式。
在這里并不會(huì)拿canvas去做渲染之類的，單純的是要利用canvas的某些API。

剛開始的規(guī)劃大致是這樣的：

我們上傳一張圖片

創(chuàng)建一個(gè)Image對(duì)象接收上傳的圖片資源

將Image對(duì)象放入canvas中

通過canvas生成圖片文件對(duì)應(yīng)的rgba數(shù)據(jù)

處理rgba數(shù)據(jù)轉(zhuǎn)換為box-shadow屬性

done

我們在監(jiān)聽input[type="file"]的change事件時(shí)，可以在target里邊拿到一個(gè)files的對(duì)象。
該對(duì)象為本次上傳傳入的文件列表集合，一般來說我們?nèi)〉谝粋€(gè)元素就是了。
我們拿到了一個(gè)File類型的對(duì)象，接下來就是用Image來接收這個(gè)File對(duì)象了。

這里會(huì)用到一個(gè)瀏覽器提供的全局對(duì)象URL，URL提供了一個(gè)createObjectURL的方法。
方法接收一個(gè)Blob類型的參數(shù)，而File則是繼承自Blog，所以我們直接傳入就可以了。
然后再使用一個(gè)Image對(duì)象進(jìn)行接收就可以了：

$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關(guān)于URL.createObjectURL的介紹

canvas可以直接渲染圖片到畫布中，可以是一個(gè)Image對(duì)象、HTMLImageElement及更多媒體相關(guān)的標(biāo)簽對(duì)象。
所以我們上邊會(huì)把數(shù)據(jù)暫存到一個(gè)Image對(duì)象中去。
我們在調(diào)用drawImage時(shí)需要傳入x、y、width、height四個(gè)參數(shù)，前兩個(gè)必然是0了，關(guān)于后邊兩個(gè)屬性，正好當(dāng)我們的Image對(duì)象加載完成后，直接讀取它的width和height就是真實(shí)的數(shù)據(jù)：

let context = $canvas.getContext("2d")
$img.addEventListener("load", _ => {
  context.drawImage($img, 0, 0, $img.width, $img.height)
})

當(dāng)我們把圖片渲染至canvas后，我們可以調(diào)用另一個(gè)API獲取rgba相關(guān)的數(shù)據(jù)。

我們調(diào)用getImageData會(huì)返回如下幾個(gè)參數(shù)：

data

width

height

data為一個(gè)數(shù)組，每相鄰的四個(gè)元素為一個(gè)像素點(diǎn)的rgba描述。
一個(gè)類似這樣結(jié)構(gòu)的數(shù)組：[r, g, b, a, r, g, b, a]。

MDN關(guān)于context.drawImage的介紹  
MDN關(guān)于context.getImageData的介紹

在上邊我們拿到了一個(gè)一維數(shù)組，接下來就是將它處理為更合理的結(jié)構(gòu)。
P.S. 一維數(shù)組是從左到右從上到下排列的，而不是從上到下從左到右

我們可以發(fā)現(xiàn)，width與height相乘正好是data數(shù)組的length。
而數(shù)組的順序則是先按照x軸進(jìn)行增加的，所以我們這樣處理得到的數(shù)據(jù)：

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作為循環(huán)的最大長度，然后在生成每個(gè)像素點(diǎn)的描述時(shí)
通過當(dāng)前下標(biāo)對(duì)圖片寬度取余得到當(dāng)前像素點(diǎn)在圖片中的x軸下標(biāo)
通過當(dāng)前下標(biāo)對(duì)圖片寬度取商得到當(dāng)前像素點(diǎn)在圖片中的y軸下標(biāo)
同時(shí)塞入rgba四個(gè)值，這樣我們就會(huì)拿到一個(gè)類似這樣結(jié)構(gòu)的數(shù)據(jù)：

[{
  x: 0,
  y: 0,
  r: 255,
  g: 255,
  b: 255,
  a: 255
}]

box-shadow是支持多組屬性的，兩組屬性之間使用,進(jìn)行分割。
所以，我們拿到上邊的數(shù)據(jù)以后，直接遍歷拼接字符串就可以生成我們想要的結(jié)果：

let boxShadow = results.map(item =>
  `${item.x}px ${item.y}px rgba(${item.r}, ${item.g}, ${item.b}, ${item.a})`
).join(",")

效果圖：

雖說這樣就做出來了，但是對(duì)瀏覽器來說太不友好了。因?yàn)槭敲恳粋€(gè)像素點(diǎn)對(duì)應(yīng)的一個(gè)box-shadow屬性。
好奇的童鞋可以選擇F12檢查元素查看該div。(反正蘋果本是扛不住)
所以為了我們能夠正常使用F12，我們下一步的操作就是合并相鄰?fù)档?b>box-shadow，減少box-shadow屬性值的數(shù)量。

雖說圖片可能是由各種顏色不規(guī)則的組合而成，但畢竟還是會(huì)有很多是重復(fù)顏色的。
所以我們要計(jì)算出某一種顏色可合并的最大面積。
針對(duì)某一種顏色，用表格表示可能是這樣的：

就像在圖中所示，我們最理想的合并方式應(yīng)該是這樣的 （radius的取值意味著我們只能設(shè)置一個(gè)正方形）：

于是。。如果計(jì)算出來這一塊面積就成為了一個(gè)問題-.-

目前的思路是，將數(shù)組轉(zhuǎn)換為二維數(shù)組，而不是單純的在對(duì)象中用x、y標(biāo)識(shí)。
所以，我們對(duì)處理數(shù)組的函數(shù)進(jìn)行如下修改：

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)}` // 為了方便后續(xù)的對(duì)比相同顏色，直接返回一個(gè)字符串
    }
  }

  return results
}

這時(shí)我們就能得到一個(gè)按照x、y排列的二維數(shù)組，下一步的操作就是以任意點(diǎn)為原點(diǎn)，進(jìn)行匹配周圍的cell。
參考上邊的表格示例，我們會(huì)拿到一個(gè)類似這樣的數(shù)據(jù) （僅作示例）：

[
  [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原點(diǎn)處開始搜索，獲取當(dāng)前原點(diǎn)的色值，然后與周圍進(jìn)行比較，獲取一個(gè)最大半徑的正方形：

/**
 * 根據(jù)給定范圍獲取匹配當(dāng)前節(jié)點(diǎn)的正方形
 * @param  {Array}  matrix            二維矩陣數(shù)組
 * @param  {Object} tag               當(dāng)前要匹配的節(jié)點(diǎn)
 * @param  {Number} [startRowIndex=0] 開始的行下標(biāo)，默認(rèn)為1
 * @param  {Number} [startColIndex=0] 開始的列下標(biāo)，默認(rèn)為1
 * @return {Number}                   返回一個(gè)最小范圍
 */
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
          // 這個(gè)表示在某一行的第一列就匹配失敗了，沒有必要再進(jìn)行后續(xù)的匹配，直接`break`到最外層
        } else {
          results.push(colIndex - startColIndex)
          break
          // 將當(dāng)前下標(biāo)放入集合，終止當(dāng)前循環(huán)
        }
      } else if (colIndex === row.length - 1) {
        results.push(colIndex - startColIndex)
        // 這里表示一整行都可以與當(dāng)前元素匹配
      }
    }
  }

  // 對(duì)所有的x、y軸的值進(jìn)行比較獲取最小的值
  let count = Math.min.apply(Math, [results.length].concat(results))

  return count
}

函數(shù)會(huì)從起點(diǎn)開始按順序遍歷所有的元素，在遇到不匹配的節(jié)點(diǎn)后，就會(huì)break進(jìn)入下次循環(huán)，并將當(dāng)前的下標(biāo)存入數(shù)組中。
在遍歷完成后，我們將數(shù)組所有的item以及數(shù)組的長度（可以認(rèn)為是y軸的值）一同放入Math.min獲取一個(gè)最小的值。
這個(gè)最小的值就是我們以當(dāng)前節(jié)點(diǎn)為原點(diǎn)時(shí)可以生成的最大范圍的正方形了。
P.S. 這個(gè)計(jì)算方式并不是很好，還不夠靈活

因?yàn)樯线呉仓皇呛喜⒘艘粋€(gè)正方形，還會(huì)剩下很多面積沒有被查看。
所以我們用遞歸的方式來計(jì)算剩余面積，在第一次匹配結(jié)束后，是大概這個(gè)樣子的：

所以我們在遞歸處拆分出了兩塊會(huì)有重復(fù)數(shù)據(jù)的面積：

以及之后的遞歸也是參照這個(gè)樣子來的，這樣能保證所有的節(jié)點(diǎn)都會(huì)被照顧到，不會(huì)漏掉。(如果有更好的方式，求回復(fù))。

這樣配合著前邊拿到的半徑數(shù)據(jù)，很輕松的就可以組裝出合并后的集合，下一步就是將其渲染到DOM中了。

現(xiàn)在我們已經(jīng)拿到了想要的數(shù)據(jù)，關(guān)于生成box-shadow屬性處我們也要進(jìn)行一些修改，之前因?yàn)槭且粋€(gè)像素對(duì)應(yīng)一個(gè)屬性值，但是現(xiàn)在做了一些合并，所以，生成屬性值的操作大概是這個(gè)樣子的：

$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的值必須要加上半徑的值，否則會(huì)出現(xiàn)錯(cuò)位，因?yàn)?b>box-shadow是從中心開始渲染的，而不是左上角

原圖&兩種實(shí)現(xiàn)方式的效果對(duì)比：

我們拿合并前后生成的CSS存為了文件，并查看了文件大小，效果在一些背景不是太復(fù)雜的圖片上還是很明顯的，減少了2/3左右的體積。
如果將rgba替換為hex，還會(huì)再小一些

現(xiàn)在再進(jìn)行檢查元素不會(huì)崩潰了，但是依然會(huì)卡:)

box-shadow

drawImage

getImageData

createObjectURL