JavaScript로 자리 표시자 이미지 생성기 구축 📷 🔥

모두가 "vanilla JavaScript"를 좋아하므로 오늘 HTML Canvas 의 도움으로 자리 표시자 이미지 생성기를 구축하겠습니다.

비디오 튜토리얼

항상 그렇듯이 이 자습서를 비디오 형식으로 선호하는 경우 내 YouTube 채널에서 언제든지 자습서를 시청하십시오.

HTML 추가

사용자 인터페이스 및 입력 필드용 HTML부터 시작하겠습니다.

<h1>Placeholder Image Generator</h1>
<h3>Dimensions</h3>
<input type="number" class="input" id="inputWidth" value="400">
x
<input type="number" class="input" id="inputHeight" value="300">
<button id="buttonGenerate" type="button">Generate</button>

<h3>Data URL</h3>
<input type="text" class="input" id="inputDataUrl" placeholder="Please generate a placeholder image!" readonly>

<h3>Preview</h3>
<img alt="Preview Image" id="imagePreview" style="display: none">

이 코드에는 몇 가지 중요한 요소가 있습니다.

너비와 높이에 대한 두 입력 필드

자리 표시자 이미지를 생성하는 버튼

이미지에 대해 생성된 데이터 URL을 저장하기 위한 입력 필드

이미지 미리보기

다음으로 HTML 스타일을 지정합니다.

아주 기본적인 CSS를 추가하여 사물을 좀 더 아름답게 보이게 할 수 있습니다.

body {
    font-family: sans-serif;
}

.input {
    height: 30px;
    box-sizing: border-box;
}

#inputWidth,
#inputHeight {
    width: 100px;
}

#inputDataUrl {
    width: 100%;
    max-width: 600px;
}

#imagePreview {
    width: 100%;
}

입력 필드에 box-sizing를 사용하는 것에 유의하십시오. 이렇게 하면 테두리나 패딩을 추가하더라도 높이가 30px 유지됩니다. 자세한 내용은 box-sizing을 참조하십시오.

또한 #inputDataUrl의 속성을 기록해 두십시오. 이러한 속성을 사용하면 "입력 필드가 100% 너비를 차지하도록 하되 600픽셀을 초과하지 않도록 하십시오"라고 말합니다. 이는 모바일 응답성에 도움이 됩니다.

자바스크립트 작성

주요 기능

이제 JavaScript를 시작했으므로 첫 번째 목적은 크기에 따라 조정하고 배경과 텍스트를 추가할 수 있는 캔버스 요소를 생성하는 함수를 작성하는 것입니다.

function createPlaceholderCanvas(width, height) {
    const element = document.createElement("canvas");
    const context = element.getContext("2d");

    element.width = width;
    element.height = height;

    // Fill in the background
    context.fillStyle = "#aaaaaa";
    context.fillRect(0, 0, element.width, element.height);

    // Place the text
    context.font = "bold 90px sans-serif";
    context.fillStyle = "#333333";
    context.textAlign = "center";
    context.textBaseline = "middle";
    context.fillText(`${width}x${height}`, element.width / 2, element.height / 2);

    return element;
}

이 함수의 첫 번째 줄에서 우리는 작업할 수 있는 새로운 HTML 캔버스 요소를 생성할 뿐입니다. 두 번째 줄은 배경과 텍스트를 추가하기 위해 메서드를 호출할 수 있는 2D 컨텍스트를 가져오는 것입니다.

다음 두 줄은 매우 자명합니다. 사용자가 입력할 캔버스에 대해 원하는 너비와 높이를 설정하고 있습니다.

배경을 채우기 위해 어두운 회색을 fillStyle 로 설정합니다. 이것은 다음 채우기 명령이 해당 색상을 사용한다는 것을 의미합니다.

말하자면 fillRect를 사용하여 왼쪽 상단 모서리에서 시작하여 캔버스의 전체 너비와 높이에 걸쳐 캔버스의 배경을 칠합니다.

함수의 마지막 부분은 자리 표시자 이미지에 텍스트를 추가합니다. 컨텍스트의 글꼴과 색상 및 텍스트 정렬 옵션을 설정합니다.

이제 글꼴 모양을 정의했으므로 fillText 를 사용하여 텍스트를 추가하고 template strings 을 활용하여 400x300과 같은 문자열을 생성합니다. 너비와 높이를 2로 나누면 텍스트가 중앙에 그려집니다.

마지막 줄에서는 새로 만든 HTML 캔버스 요소를 반환하기만 하면 됩니다.

사용자 인터페이스 작동시키기

이제 로직의 핵심을 작성했으므로 중요한 HTML 요소 각각에 대한 참조를 얻을 수 있습니다.

const inputWidth = document.getElementById("inputWidth");
const inputHeight = document.getElementById("inputHeight");
const inputDataUrl = document.getElementById("inputDataUrl");
const imagePreview = document.getElementById("imagePreview");

다음으로 "생성"버튼을 클릭했을 때 반응할 수 있습니다.

document.getElementById("buttonGenerate").addEventListener("click", () => {
    const MIN_SIDE_LENGTH = 200;

    // Validation
    if (
        isNaN(inputWidth.value)
        || isNaN(inputHeight.value)
        || inputWidth.value < MIN_SIDE_LENGTH
        || inputHeight.value < MIN_SIDE_LENGTH
    ) {
        alert(`Please enter a valid image size. The minimum length is ${MIN_SIDE_LENGTH}px`);
        return;
    }

    const canvasElement = createPlaceholderCanvas(inputWidth.value, inputHeight.value);
    const dataUrl = canvasElement.toDataURL();

    inputDataUrl.value = dataUrl;
    imagePreview.src = dataUrl;
    imagePreview.style.display = "block";
    imagePreview.style.maxWidth = `${inputWidth.value}px`;
});

보시다시피, 첫 번째 줄에서 최소 측면 길이를 정의하고 있습니다. 사용자가 너비 또는 높이를 200보다 작게 입력하면 자리 표시자 이미지 생성을 진행하고 싶지 않습니다. 물론 이것을 변경할 수 있습니다 🙂

다음으로 몇 가지 기본적인 유효성 검사를 수행합니다. 사용자가 너비와 높이에 대해 유효한 숫자를 실제로 제공했는지, 그리고 해당 숫자가 최소 측면 길이보다 작은지 확인합니다.

유효성 검사가 실패하면 사용자에게 알리고 조기에 함수 실행을 중지합니다return.

유효성 검사가 통과되면 위에서 정의한 함수를 사용하여 캔버스 요소를 만들고 이미지에 대한 data URL을 가져옵니다.

코드의 마지막 몇 줄은 데이터 URL을 사용자에게 제공하고 img 태그를 사용하여 미리보기 이미지를 사용자에게 표시하는 것을 포함합니다. 저해상도 이미지가 늘어나지 않도록 최대 너비도 설정했습니다.

그리고 그게 다야! 이 튜토리얼을 즐겼기를 바랍니다. 마음에 드셨다면 제 유튜브 채널을 확인해보세요 😁