代碼幫我畫像素畫

這一陣子迷上了像素風格，很有復古的味道，加上小時候玩寶可夢的時候還是像素風格，牽扯出了太多情懷。
甚至把自己的電腦壁紙也換成了像素風。很有感覺😝

想自己在像素風上創作，但是感覺自己是沒有那種藝術細胞…… 所以就在想，能不能自己把一張正常的圖片轉換成像素風？🤔

思路⭐#

使用 canvas 將圖片縮小，使其丟失部分像素信息
再將縮小的圖片繪製出來
將縮小的圖片放大，使能看到其像素點

其實就是小的圖片放大，會感覺到糊的效果。

Code💻#

禁止瀏覽器的平滑處理其實就是是否抗鋸齒。
用正則表達式限制輸入框只能輸入 0-100，意味著讓圖片縮放的百分比（100 就是沒有縮放，達不到像素化的效果）

const pixel =  (canvas, image, scale)=> {
    scale *= 0.01;
    
    canvas.width = image.width;
    canvas.height = image.height;

    // 將圖片縮小
    let scaledW = canvas.width * scale;
    let scaledH = canvas.height * scale;

    let ctx = canvas.getContext('2d');
  
    // 禁止瀏覽器的平滑處理
    ctx.imageSmoothingEnabled = false;
    ctx.mozImageSmoothingEnabled = false;
    ctx.webkitImageSmoothingEnabled = false;
    ctx.msImageSmoothingEnabled = false;

    //將縮小後的圖片繪製出來
    ctx.drawImage(image, 0, 0, scaledW, scaledH);
    //將縮小後的圖片還原到原來的大小
    ctx.drawImage(canvas, 0, 0, scaledW, scaledH, 0, 0, canvas.width, canvas.height);
  };


btn.addEventListener('click', function(){
  const Regex = new RegExp(/^100$|^(\d|[1-9]\d)(\.\d+)*$/)
  let scale = input.value;
  if(scale==''){
    scale = 40;
  }
  if(!Regex.test(scale)){
    window.alert('輸入不規範')
    return;
  }
  console.log(scale);
  pixel(canvas,img,scale);
}, false);

Magren

代碼幫我畫像素畫

思路⭐#

Code💻#

效果👇#