지 구 여 행

노마드코더/바닐라JS로 그림 앱 만들기/2. 이미지 추가, 텍스트 추가, 파일 저장하기 본문

필기노트/노마드코더

노마드코더/바닐라JS로 그림 앱 만들기/2. 이미지 추가, 텍스트 추가, 파일 저장하기

COSMOSUNION 2022. 10. 3. 14:15

 

이미지 추가 / 텍스트 추가 / 파일 저장하기

 

 

이미지 추가하기

 

HTML

<body>
    <input type="file" accept="image/*" id="image-file" />
</body>

Javascript

const imageInput = document.querySelector("#image-file");

function onImageChange(event) {
  const file = event.target.files[0];
  const fileURL = URL.createObjectURL(file);
  const image = new Image();
  image.src = fileURL;
  image.onload = function () {
    ctx.drawImage(image, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  };
}

imageInput.addEventListener("change", onImageChange);

 

  • URL.createObjectURL(object) : 주어진 객체(object)를 가리키는 URL을 DOMString으로 반환

 

  • Image()
  • Image(width)
  • Image(width, height)

생성자 함수 Image()는 새로운 HTMLImageElement 인스턴스를 생성하며 document.createElement('image') 와 동일한 기능을 합니다.

 

출처 : https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

  • drawImage(image, dx, dy)
  • drawImage(image, dx, dy, dWidth, dHeight)
  • drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

메소드 함수 drawImage()를 통해 캔버스에 이미지를 그립니다. ①이미지를 캔버스 좌표값(dx, dy)에 불러오거나, ②이미지를 캔버스 좌표값(dx, dy)에 dWidth x dHeight 사이즈로 불러오거나, ③불러올 이미지(source Image)를 이미지 좌표값(sx, sy)을 기준으로 sWidth x sHeight 사이즈로 잘라낸 다음, 잘라낸 이미지를 캔버스 좌표값(dx, dy)에 dWidth x dHeight 사이즈로 불러올 수 있습니다.  

 

  • object.onload = function() {}

객체가 로드되었을 때 (괄호 {}안의 코드를 실행하는) 함수를 실행합니다. EventListener에 직접 연결할 수도 있습니다.

object.eventListner("load", function() {});

 

 

텍스트 추가하기

 

HTML

<body>
    <input type="text" id="text-input" placeholder="입력 후 더블클릭" />
</body>

Javascript

const textInput = document.querySelector("#text-input");

function onDoubleClick(event) {
  const newText = textInput.value;
  if (newText !== "") {
    ctx.save();
    ctx.lineWidth = 1;
    ctx.font = "30px sans-serif";
    ctx.strokeText(newText, event.offsetX, event.offsetY);
    ctx.restore();
  }
}

canvas.addEventListener("dblclick", onDoubleClick);

텍스트를 추가할 때 save()와 restore()을 이용하여 독립적인 경로를 만들어주지 않으면, 기존의 선 두께(lineWidth)가 변경되는 버그가 발생합니다. 

 

 

캔버스 이미지 파일로 저장하기

 

HTML

<body>
    <button id="save-image">저장하기</button>
</body>

Javascript

const saveImageBtn = document.querySelector("#save-image");

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

saveImageBtn.addEventListener("click", onSaveClick);

 

base64* : 바이너리 데이터(이미지)를 6bit단위의 텍스트 데이터로 인코딩

  • canvas.toDataURL() : 캔버스 이미지 정보를 담은 문자열(데이터URL)을 반환
  • a.download = "myDrawing.png" : a.setAttribute("download", "myDrawing.png")와 같은 기능

 

 

정리

See the Pen NomadCoder/VanillaJS/Meme-maker 2 by cosmosunion (@cosmosunion) on CodePen.

 

 

 

 

 

※ 참고자료

1. MDN web docs : https://developer.mozilla.org/ko/docs/Web/API/Canvas_API

2. 노마드코더/바닐라JS로 그림 앱 만들기 : https://nomadcoders.co/javascript-for-beginners-2

 

'필기노트 > 노마드코더' 카테고리의 다른 글

노마드코더/바닐라JS로 그림 앱 만들기/1. 그리기 기능 설정하기  (0) 2022.10.02
노마드코더/바닐라JS로 크롬 앱 만들기/2. JS on the browser  (0) 2022.08.01
노마드코더/바닐라JS로 크롬 앱 만들기/1. Basic Javascript  (0) 2022.07.24
노마드코더/코코아톡 클론코딩/3. Advanced CSS  (0) 2022.07.03
노마드코더/코코아톡 클론코딩/2. Learning CSS  (0) 2022.07.01
'필기노트/노마드코더' Related Articles more
Comments