Pixel It3 行代碼把照片變成像素畫(huà)【免費(fèi)下載鏈接】pixelitCreate pixel art from an image項(xiàng)目地址: https://gitcode.com/gh_mirrors/pi/pixelitPixel It 是一個(gè)純 JavaScript 像素藝術(shù)轉(zhuǎn)換庫(kù)把普通照片變成復(fù)古像素風(fēng)格的圖片。它沒(méi)有外部依賴只使用瀏覽器 Canvas核心實(shí)現(xiàn)集中在src/pixelit.js一個(gè)文件里。你可以把圖像像素化、轉(zhuǎn)成灰度或者把顏色壓縮到你指定的調(diào)色板。5 分鐘跑通第一張像素圖克隆倉(cāng)庫(kù)并安裝依賴用 gulp 啟動(dòng)本地構(gòu)建git clone https://gitcode.com/gh_mirrors/pi/pixelit npm install gulp serve頁(yè)面里放一個(gè)img和一個(gè)canvas用默認(rèn)約定就能運(yùn)行img srcsky.jpg idpixelitimg alt canvas idpixelitcanvas/canvas script srcpixelit.js/script script const px new pixelit(); px.draw().pixelate(); /scriptdraw()把圖片畫(huà)到畫(huà)布上pixelate()輸出像素化結(jié)果。不傳配置時(shí)庫(kù)默認(rèn)讀取 id 為pixelitimg的元素、寫(xiě)到 id 為pixelitcanvas的畫(huà)布所以這兩個(gè) id 對(duì)上就不用傳任何參數(shù)。三種輸出像素化、灰度與調(diào)色板壓縮實(shí)例上可組合的變換有三種.pixelate()基礎(chǔ)像素化。先縮小再放大形成色塊塊的大小由 scale 決定。.convertGrayscale()把每個(gè)像素的 RGB 三通道取平均得到黑白像素圖。.convertPalette()把每個(gè)像素映射到調(diào)色板中最近的顏色。調(diào)色板由palette配置默認(rèn)內(nèi)置 16 色。三者可以鏈?zhǔn)秸{(diào)用最后用px.saveImage()把結(jié)果以pxArt.png的文件名下載。圖左側(cè)為原始油畫(huà)右側(cè)經(jīng) Pixel It 以 4 色調(diào)色板壓縮后的像素藝術(shù)效果scale、palette 與尺寸上限怎么取scale控制像素塊大小取值 0–50 的整數(shù)默認(rèn) 8。小值塊細(xì)、接近原圖大值塊粗、更抽象。官方 4 色示例用的就是 17。傳入超出 0–50 的值不會(huì)報(bào)錯(cuò)而是靜默回落到默認(rèn) 8。palette是[[r,g,b],...]形式的數(shù)組之后也能用setPalette(arr)更換。顏色數(shù)量下限是 2只有 1 色時(shí)convertPalette()不會(huì)生效。顏色越少風(fēng)格越統(tǒng)一越多越接近原圖細(xì)節(jié)。maxWidth / maxHeight限制輸出尺寸超過(guò)的部分會(huì)在draw()階段被等比縮小兩者同時(shí)設(shè)置時(shí)高度優(yōu)先。const px new pixelit({ from: document.getElementById(pixelitimg), scale: 20, // 0-50默認(rèn) 8 palette: [[26,28,44],[93,39,93],[177,62,83],[239,125,87]] }); px.draw().pixelate().convertPalette();兩個(gè)實(shí)際處理鏈路做游戲素材輸入一張人物或場(chǎng)景照片scale 取 17–20再鏈上convertPalette()壓到 4–16 色輸出可直接當(dāng)素材用的低分辨率像素圖。docs/assets/px-palette4c.jpg就是 4 色、塊大小 17 的效果。處理大尺寸照片輸入一邊超過(guò) 900px 的高清圖例如docs/assets/tests/里那張 2720×1224 的鍵盤(pán)照片。此時(shí)pixelate()內(nèi)部會(huì)自動(dòng)把縮小比例減半同樣的 scale 在大圖上得到的塊反而更大想要輸出尺寸可控再配上maxWidth或maxHeight。圖docs/assets/tests/ 目錄中的 2720×1224 高分辨率測(cè)試圖用于驗(yàn)證 Pixel It 在大圖上的表現(xiàn)幾個(gè)容易踩的坑scale 只在 0–50 區(qū)間生效越界值會(huì)回落成默認(rèn) 8代碼不會(huì)提示。convertPalette()需要至少 2 個(gè)顏色1 色不產(chǎn)生效果。pixelate()、convertPalette()、convertGrayscale()都必須在draw()之后調(diào)用。實(shí)例創(chuàng)建時(shí)會(huì)把源圖片元素隱藏visibility: hidden并固定定位想保留顯示需要自行處理樣式。一邊超過(guò) 900px 的大圖內(nèi)部縮小比例自動(dòng)減半像素化程度和小圖不一樣調(diào)參時(shí)要留意。繼續(xù)深入去哪看docs/index.html是在線調(diào)試頁(yè)支持上傳圖片、上傳 hex 或 csv 格式的調(diào)色板文件、手動(dòng)加色。docs/tests.html用于驗(yàn)證不同尺寸圖片的處理效果。核心類(lèi)在src/pixelit.js運(yùn)行g(shù)ulp serve后構(gòu)建產(chǎn)物輸出到dist/與docs/js/兩個(gè)目錄。整個(gè)轉(zhuǎn)換鏈路就這一個(gè)文件改算法、讀源碼都不需要跨目錄?！久赓M(fèi)下載鏈接】pixelitCreate pixel art from an image項(xiàng)目地址: https://gitcode.com/gh_mirrors/pi/pixelit創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考