JS利用canvas將圖片轉為像素畫

近幾天迷上了像素畫，沉迷像素畫的世界無法自拔。畫畫雖好，但過程是有點費時間，突然靈光一閃💡，為何不直接用圖片生成像素畫，省得哼哧哼哧的畫畫了🤣

構思步驟

1. 像素畫就是把高像素的圖片拿來降低像素值。
2. 可以將正方形區域內的顏色統一為平均色。
3. 再賦值給畫布就是一個小方塊了，那豈不是就是像素畫了。

代碼

poly參數代表聚合的小方塊的像素值

HTML

<img id="source" src="image/Lena.jpg" alt="">
<canvas id="myCanvas"></canvas>

JavaScript

  window.onload = function () {
    const poly = 24
    const image = document.getElementById('source')
    const width = image.width
    const height = image.height
    const canvas = document.getElementById('myCanvas');
    canvas.width = width
    canvas.height = height
    const ctx = canvas.getContext("2d");
    ctx.drawImage(image, 0,0,width,height);
    //取得圖像數據
    const canvasData = ctx.getImageData(0, 0, width, height);
    let area = {}
    let count = 0
    for (let x = 0; x < canvas.height; x+=poly) {
      count++
      for (let y = 0; y < canvas.width; y+=poly) {
        area = {
          w:(y+poly)>canvas.width?parseInt(canvas.width%poly):poly,
          h:(count)*poly>canvas.height?parseInt(canvas.height%poly):poly
        }
        const idx = (y + x * canvas.width) * 4;
        averageColors(idx,area)
      }
    }

    ctx.putImageData(canvasData, 0, 0);
    function averageColors(idx, area){
      let aveR = aveColors(idx,area)
      let aveG = aveColors(idx+1,area)
      let aveB = aveColors(idx+2,area)

      fullColors(idx,{aveR:aveR, aveG:aveG, aveB:aveB}, area)
    }
    function aveColors(idx,area) {
      let total = 0
      for (let i=0;i<area.h;i++){
        for (let j=0;j<area.w;j++){
          if (canvasData.data[idx+(j*4)+(width*i*4)]){
            total += canvasData.data[idx+(j*4)+(width*i*4)]
          }
        }
      }
      return total/(area.w*area.h)
    }
    function fullColors(idx,rgb, area){
      for (let i=0;i<area.h;i++){
        for (let j=0;j<area.w;j++){
          canvasData.data[idx+0+(j*4)+(width*i*4)]=rgb.aveR
          canvasData.data[idx+1+(j*4)+(width*i*4)]=rgb.aveG
          canvasData.data[idx+2+(j*4)+(width*i*4)]=rgb.aveB
        }
      }
    }
  }

才藝展示

這次測試選擇大名鼎鼎的Lena女士

poly=12

poly=24

poly=48

參考

segmentfault