近來倏忽想做一些好玩的東西，找來找去，想到了之前曾經在網上看到過有人用
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