밈 메이커 만들기 (4)

/JavaScript

 

 

 

밈 메이커 만들기 (3)

 

📌 Adding Images

- 로컬 이미지를 불러와 캔버스와 동일한 크기로 캔버스 위에 뿌려줄 수 있는 코드를 작성하였다.

<input type="file" accept="image/*" />

 

우선 file을 input으로 받는다. 유의할 점은 type만 설정하면 어떤 형태의 파일이라 할지라도 다 받아온다. 우리가 필요한 것은 이미지를 받아 오는 것이므로, accept를 통해 이미지 파일만 받을 수 있도록 설정한다.

 

const fileInput = document.getElementById("file");

fileInput.addEventListener("change", onFileChange);

function onFileChange(event) {
	const file = event.target.file[0];
    const url = URL.createObjectURL(file);
    const image = new Image();
    image.src = url;
    image.onload = function() {
    	ctx.drawImage(image, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
        fileInput.value = null;
    }
}

 

받아온 이미지 중 1번(event.target.file [0])을 file이라는 상수에 저장한다. HTML에서 input을 통해 이미지를 받을 때, multiple로 설정해주지 않았으므로 이미지를 업로드할 때 두 개 이상의 이미지를 선택할 수 없다. 때문에 [0] -가장 첫 이미지를 설정하면 자동으로 선택한 이미지가 선택되는 것이다.

 

 

 

📌 Adding Text

- 작성한 text를 캔버스 위에 뿌려 줄 수 있도록 하는 코드를 작성하였다.

 

<input type="text" placeholder="Write down and then double click" id="text" />

 

여담이지만 id 지정을 해주지 않고 자바스크립트 파일에서 input value를 받아주려고 하다가 자꾸 오류가 떴다. '어라 왜 안 되는거지'의 연속... 이런 초보적인 실수 다들 하지 마시길.

 

const textInput = document.getElementById("text");

canvas.addEventListener("dblclick", onDoubleClick);

function onDoubleClick(event) {
	const text = textInput.value;
    if (text !== "") {
    	ctx.save();
        ctx.lineWidth = 1;
        ctx.font = "48px serif";
        ctx.fillText(text, event.offsetX, event.offsetY);
        ctx.restore();
    }
}

 

이번에는 캔버스에 eventListener를 걸어주었다. 다른 곳이 아니라 캔버스 위를 더블클릭하고, 더블클릭한 위치에 text를 불러와야 하기 때문이다. ctx.save();코드를 통해 기존 설정을 저장한 후 restore를 통해 텍스트 호출이 끝나면 기존에 설정해 두었던 브러시 설정으로 돌아올 수 있도록 하였다.

 

 

 

📌 Saving Image

- 제작한 캔버스 위 이미지를 저장할 수 있도록 코드를 작성하였다. HTML에 해당 버튼을 만들어 주었지만 이번엔 생략하고 자바스크립트 코드만 적어 본다.

 

function onSaveClick() {
	const url = canvas.toDataURL();
    const a = document.createElement("a");
    a.href = url;
    a.download = "myDrawing.png";
    a.click();
}

 

url과 a 태그를 생성하여 캔버스 위 이미지를 다운로드 할 수 있도록 하는 함수이다. 버튼을 클릭하면 동작한다.

 

 

 

위의 과정과 약간의 CSS editing을 거치면 이런 화면이 완성된다. 야호!

 

여기까지만 해도 훌륭하지만 여러 다른 기능을 추가한 code challenge까지 다음 포스트에서 완성해 보도록 하겠다.