이렇게 사용하세요
크기·색상·텍스트로 PNG 이미지를 만듭니다.
알아두면 좋은 점
형식과 의미
이미지는 브라우저에서 생성되며 PNG로 내려받습니다.
지원 범위와 제한
텍스트 1MB
입력이 제한을 넘으면 데이터를 나누어 처리하세요. 파일 형식이나 알고리즘이 지원 범위에 없으면 다른 형식으로 임의 변환하지 말고 요구 사항에 맞는 도구를 선택하세요.
Placeholder 이미지
크기·색상·텍스트로 PNG 이미지를 만듭니다.
입력은 이 브라우저에서 처리됩니다.
결과
입력 후 실행하면 결과가 표시됩니다.
사용 예제 코드
개발에 가져다 쓸 수 있는 기본 예제입니다. 표시된 환경에서 실행하세요.
Browser · DevTools console
현재 입력 반영은 코드에 사용된 항목에만 적용됩니다. 파일 입력은 예제에 포함하지 않습니다.
필요한 패키지 설치
const canvas = document.createElement("canvas");
canvas.width = 640;
canvas.height = 360;
const context = canvas.getContext("2d");
context.fillStyle = "#18201b";
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#b6ebbd";
context.font = "32px sans-serif";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("640 × 360", canvas.width / 2, canvas.height / 2);
document.body.append(canvas);
console.log(canvas.toDataURL("image/png"));