Html
<body> <canvas></canvas> <input id="line-width" type="range" min="1" max="10" value="5" step="0.5"/> <input type="color" id="color" /> <div> <div class= "color-option" style="background-color: #1abc9c; " data-color="#1abc9c"></div> . . . </div> <button id="mode-btn">Fill</button> <button id="destroy-btn">Destroy</button> <button id="erase-btn">Erase</button> <input type="file" accept="image/*" id="file" /> <input type="text" placeholder="Write and double click" id="text" /> <button id="save">Save image</button> <script src="app.js"></script> </body>
그림판의 기본 기능들, 배경 채우기, 그리기 전부 지우기, 지우개, 이미지 불러오기, 텍스트 넣기, 이미지 저장
app.js
이미지 불러오기
const fileInput = document.getElementById("file") fileInput.addEventListener("change", onFileChange) function onFileChange (e) { const file = e.target.files[0] const url = URL.createObjectURL(file) const image = new Image() image.src = url image.onload = function () { ctx.drawImage(image, 0,0, 750, 750) fileInput.value = null } }
text 넣기
const textInput = document.getElementById("text") canvas.addEventListener("dblclick", ondoubleclick) function ondoubleclick (e) { const text = textInput.value if(text !== "") { ctx.save() ctx.lineWidth = 1 ctx.font = "49px serif" ctx.fillText(text, e.offsetX, e.offsetY) ctx.restore() } }
이미지 저장하기
const saveBtn = document.getElementById('save') saveBtn.addEventListener("click", onSaveClick) function onSaveClick () { const url = canvas.toDataURL() const a = document.createElement("a") a.href = url a.download = "myDrawing.png" a.click() }
HTML 문서에서, Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만들어 반환합니다.
URL.createObjectURL() 지정한 object의 참조 URL을 담은 String을 반환합니다.
코린이 화이팅