[JS] canvas 2 - meme maker, text, save

2023.06.30 - [JS] - [JS] Canvas

[JS] Canvas

코드에 대한 설명은 모두 주석에!

// index.html
 <div class="color-chip">
    <input type="color" id="color">
    <div>
      <div class="color" style="background-color: #1abc9c" data-color = "#1abc9c"></div>
      <div class="color" style="background-color: #3498db" data-color= "#3498db"></div>
      <div class="color" style="background-color: #34495e" data-color= "#34495e"></div>
      <div class="color" style="background-color: #27ae60" data-color= "#27ae60"></div>
      <div class="color" style="background-color: #8e44ad" data-color= "#8e44ad"></div>
      <div class="color" style="background-color: #f1c40f" data-color= "#f1c40f"></div>
      <div class="color" style="background-color: #e74c3c" data-color= "#e74c3c"></div>
      <div class="color" style="background-color: #95a5a6" data-color= "#95a5a6"></div>
      <div class="color" style="background-color: #d35400" data-color= "#d35400"></div>
      <div class="color" style="background-color: #bdc3c7" data-color= "#bdc3c7"></div>
      <div class="color" style="background-color: #2ecc71" data-color= "#2ecc71"></div>
      <div class="color" style="background-color: #e67e22" data-color= "#e67e22"></div>
    </div>
  </div>
  <canvas></canvas>
  <div id="btn-box">
    <input type="range" id="line-width" min="1" max="10" step="0.5" value="5">
    <button id="mode-btn">Fill</button>
    <button id="clear">Clear</button>
    <button id="eraser">Erase</button>
// 여기서부터 코드 확인하기
    <label for="file" class="file-label">Add Photo</label>
    <input type="file" accept="image/*" id="file" placeholder="Add Photo">
    <input type="text" id="text" placeholder="Add text here">
    <button id="save">Save</button>
  </div>

1. 위의 링크와 비교해서 달라진 점은 태그 구조가 바뀌었다. → css 작업할 때 편하게 작업하고 스타일을 이쁘게 만들기 위해서 

2. 파일을 열어서 이미지를 가져오고, 텍스트를 입력하면 캔버스에서 입력할 수 있도록, 캔버스에 그린 내용을 저장할 수 있다.

 

// Index.html
// 타입이 file인 input을 사용하면 브라우저에 나타나는건 파일 선택 버튼인데 그걸 없애고 
// 원하는 텍스트를 넣기 위해서 input의 스타일을 display:none;으로 바꾸고 label에 스타일을 부여하면 된다.
<label for="file" class="file-label">Add Photo</label>
<input type="file" accept="image/*" id="file" placeholder="Add Photo">

// app.js
// meme maker
ctx.beginPath()
ctx.lineCap = 'round' // 선의 끝이 둥글게
const imgFile = document.querySelector('#file')

function onFileChange(e){
  const file = e.target.files[0] // file이름
  const url = URL.createObjectURL(file) // 이미지 파일 주소 생성
  const image = new Image() // JS에서 img 태그 생성
  image.src = url
  image.onload = function (){
    ctx.drawImage(image, 0, 0, CANVASE_WIDTH, CANVAS_HEIGHT)
    imgFile.value = null // 파일 선택 값을 초기화 해야 다음 코드인 다른 사진을 선택할 수 있음
    URL.revokeObjectURL(url); // 사용이 끝난 URL 해제
  }
}
imgFile.addEventListener('change', onFileChange)

 

// Index.html
// input칸에 텍스트를 입력하고 캔버스에서 더블클릭을 하면 입력한 텍스트가 보여질 수 있게
<input type="text" id="text" placeholder="Add text here">

// app.js
// text
const textInput = document.querySelector('#text')
function onDoubleClick(e){
  const text = textInput.value
  if (text !== ''){
    ctx.save() // ctx 저장
    ctx.lineWidth = 1
    ctx.font = '48px serif'
    ctx.fillText(text, e.offsetX, e.offsetY)
    ctx.restore() // ctx 재개
  }
}
canvas.addEventListener('dblclick', onDoubleClick)

 

// Index.html
// 저장하는 버튼
<button id="save">Save</button>

// app.js
// 저장
const save = document.querySelector('#save')
function onSaveClick(e){
  // toDataURL() 호출하면 캔버스에 그려진 이미지가 Data URL 형식으로 반환된다
  // Data URL은 이미지를 텍스트로 나타내는 형식으로 다른 웹 요소에서 이미지를 사용하거나 서버로 이미지를 전송하는데 사용한다.
  // img태그의 소스로 사용되어진다.
  const url = canvas.toDataURL() 
  // html의 a태그를 만드는 것과 동일
  const a = document.createElement('a')
  a.href = url
  a.download = 'myDrawing.png' // 다운로드되는 파일의 이름
  a.click() // 사용자가 save버튼을 클릭했을 때 다운로드 링크를 자동으로 클릭하도록 설정하는 것
}
save.addEventListener('click', onSaveClick)

 

 

// styles.css
canvas{
  width: 700;
  height: 700;
  border-radius: 10px;
  background-color: white;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: rgb(181, 181, 181);
}
#color{
  width: 40px;
}
.color{
  cursor: pointer;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin: 10px;
  border: 3px solid #fff;
}
.color:hover{
  transform: scale(1.2);
}
.color-chip{
  display: flex;
  flex-direction: column;
  align-items: center;
}
button{
  width: 50px;
  height: 50px;
}
#btn-box{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#btn-box input,
#btn-box button{
  width: 130px;
  height: 30px;
  margin: 10px;
  border: none;
  border-radius: 5px;
  background-color: #015CC8;
  color: white;
  font-size: 15px;
  cursor: pointer;
}
#btn-box #text{
  text-align: center;
  background-color: #fff;
  color: #000;
}
#btn-box #text::placeholder{
  color: gray;
}
#file{
  display: none;
}
.file-label{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 130px;
  height: 30px;
  margin: 10px;
  border: none;
  border-radius: 5px;
  background-color: #015CC8;
  color: white;
  font-size: 15px;
  cursor: pointer;
}
#btn-box input:hover,
#btn-box button:hover,
.file-label:hover{
  transform: scale(1.1);
}

https://github.com/winterkang/JavaScript-Challenge/tree/main/canvas

GitHub - winterkang/JavaScript-Challenge