한 색상만으로 이루어진 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로 저장도 가능!