[JS] Generate a single Color PNG File

옥영빈·2023년 1월 18일
0

문제점

한 색상만으로 이루어진 PNG파일이 만들어지지 않는다!

해결 방법

몇 시간동안 해맸다... 답은

npm install pnglib-es6

이거 하나면 해결...

import PNGImage from 'pnglib-es6';

// Create new PNG image, parameters (only indexed 8-bit pngs are supported at the moment):
// width (number)
// height (number)
// depth (number of palette entries)
// [backgroundColor] (optional background color, when omitted 'transparent' is used)
const image = new PNGImage(100, 100, 8);

// Add colors to the palette (uses tinycolor for converting the color)
const redColor = image.createColor('#FF0000');
const blueColor = image.createColor('blue');
const greenColor = image.createColor('rgba(0, 255, 0, 1)');

// Do some pixel drawing
image.setPixel(50, 50, redColor);
const color = image.getPixel(50, 50);


// Convert image to base-64
const base64 = image.getBase64();

// Or get the data-url which can be passed directly to an <img src>
const dataUri = image.getDataURL(); // data:image/png;base64,...

image.src = dataUri
var a = document.createElement("a"); //Create <a>
a.href = image.src; //Image Base64 Goes here
a.download = "color.png"; //File name Here
a.click(); //Downloaded file

여기서 주의 할 점은 image.createColor() 이 부분이다.
저 부분은 픽셀 하나! 만 찍혀있다.
즉 실제로 보면 점 하나만 찍혀있다는 것이다.
이를 원하는 색으로 for문을 이용해 다 채워 넣었다!

이런식으로 하면 원하는 색으로 채울 수 있고 PNG로 저장도 가능!

profile
webGL개발 초보

0개의 댓글