讓圖片像素化的好工具！

今天來介紹在網路上找到的資源

可以讓圖片變像素化的一個 js library

今天要介紹的 library 就是 giventofly 的 pixelit (Github)，它是一個 javascript 的 library，可以將網頁中的圖片轉成像素畫，並畫在網頁的 canvas 上，可以拿來當馬賽克。

範例

線上使用

作者的網站上也有能讓大家直接使用的地方，因此建議直接去網站上使用即可 (連結)。

JS Library

下方是作者給的 js 使用範例，另外可以調整區塊的大小、調色盤、灰階…其他的設定，有興趣可以去作者的網站看 (連結)。

<img src="test.jpg"  id="pixelitimg" alt="">
<canvas id="pixelitcanvas"></canvas>
<script src="pixelit.js" type="text/javascript"></script>
<script>
  //create object
  const px = new pixelit();
  px.draw().pixelate();
</script>

Reference

• giventofly/pixelit