| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
- tailwindcss
- 웹 브라우저 렌더링
- react
- jest
- canvas
- axios-mock-adapte
- HTML
- tanstack-query
- 바닐라 JS로 그림판 만들기
- 코딩독학
- javascript
- 코코아톡 클론코딩
- 노마드코더
- 노마드 코더
- 바닐라 JS로 크롬 앱 만들기
- 코딩일기
- HTML 파일구조
- CSS
- JS
- next.js
- typescript
- negative margin
- canvas js
- clone coding
- JAVA Script
- 프론트엔드
- queryprovider
- canvas image
- 생활코딩
- 웹 브라우저 구조
- Today
- Total
목록canvas image (2)
Coding Archive
canvas js로 구현하기 (7) - saving canvas painting [캔버스 그림 저장하기]
saving canvas painting 캔버스에 그린 그림을 저장하는 방법을 알아보겠습니다. [ html / css ] 1 2 3 4 save image Colored by Color Scripter cs html에서 캔버스와 세이브 버튼을 만들어 줍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 body { padding: 44px; display: flex; flex-direction: column; align-items: center; background-color: #f7f7f7; } canvas { background-color: white; border-radius: 5%; bo..
canvas js로 구현하기 (6) - canvas drawing image[캔버스에 이미지 출력하기 - 사진첨부]
canvas drawing image 캔버스에 사진을 첨부할 수 있는 방법을 알아보겠습니다. [ html / css ] 1 2 3 4 Colored by Color Scripter cs accept 속성을 추가해 첨부하려는 file을 특정할 수 있습니다. (accept="image/*" ->모든 이미지 파일을 허용한다는 의미) 이렇게 input file을 만들게 되면 위의 기본 스타일처럼 그려지게 됩니다. 하지만 css를 변경할 수 없기 때문에 스타일을 변경하고 싶은 경우라면 label을 사용해 해결할 수 있습니다. 1 2 3 4 5 6 7 Add Photo Colored by Color Scripter cs 라벨 태그의 for 속성을 이용해 input file 태그와 연결을 시켜주면, label을 클릭..