[JavaScript] 자바스크립트에서 캔버스 그래픽 다운로드하기

211_자바스크립트에서 캔버스 그래픽 다운로드하기 [적용] 브라우저에서 생성한 도형을 유저의 시스템에 다운로드하고 싶을 때 브라우저에서 가공한 이미지를 유저의 시스템에 다운로드하고 싶을 때 [문법] 메소드 의미 반환 new Blob(배열, 옵션) Blob 객체 생성 Blob 객체 [내용] a 요소를 사용해 캔버스 요소에서 작업한 그래픽을 다운로드 할 수 있다. 이미지 데이터는 toDataURL()을 사용해 Base64 문자열로 가져오며, 바이너리이므로 Blob 객체로 변환한다. JavaScript (부분) main.js // 캔버스 요소 참조 const canvas2 = document.querySelector('#cnavas-effected'); // 파일 형식과 파일명 지정 const mimeType..

2022.07.28

[JavaScript] 자바스크립트에서 PNG/JPEG DataURL로 불러오기

210_자바스크립트에서 PNG/JPEG DataURL로 불러오기 [적용] DataURL로 PNG/JPEG 형식의 데이터를 불러오고 싶을 때 [문법] 메소드 의미 반환 canvas.to DataURL([형식*]) 지정한 형식의 DataURL 가져오기 문자열 *생략 가능 [내용] canvas.toDataURL()에 인수를 전달하여 형식이 다른 데이터의 DataURL을 가져올 수 있다. [예시 1] JPEG 이미지로 변환 toDataURL()의 인수에 변환하고 싶은 데이터 형식인 image/jpeg을 지정하면 JPEG 형식의 DataURL 문자열이 반환된다. JPEG 이미지는 배경이 검은색이므로 이미지 아래에 놓인 요소는 표시되지 않는다는 점에 주의하자. JavaScript main.js const data ..

2022.07.28

[JavaScript] 자바스크립트에서 DataURL로 캔버스에 이미지 표시하기

209_자바스크립트에서 DataURL로 캔버스에 이미지 표시하기 [적용] 캔버스 작업 결과를 문자열로 가져오고 싶을 때 문자열 타입으로 서버에 보관하고 싶을 때 캔버스의 작업 결과를 umg 요소로 복제하고 싶을 때 [문법] 메소드 의미 반환 canvas.toDataURL() DataURL 형식 출력 문자열 [내용] toDataURL()을 사용해 캔버스 요소로 작업한 그래픽을 DataURL 형식으로 출력할 수 있다. DataURL 형식은 문자열이므로 유연한 작업이 가능하다. 예를 들어 변환한 데이터를 데이터베이스에 문자열 타입으로 보관할 수 있다. 다음은 캔버스 요소에 생성한 도형을 복제하고 표시 결과를 문자열로 변환해 umg 요소의 src 속성에 대입하는 예시이다. HTML index.html JavaS..

2022.07.27

[JavaScript] 자바스크립트에서 캔버스의 이미지 가공하기

208_자바스크립트에서 캔버스의 이미지 가공하기 [적용] 로딩한 이미지에 효과를 넣고 싶을 때 [문법] 메소드 의미 반환 context.putImageData(이미지) 이미지 데이터 입력 없음 [내용] putImageData()는 이미지를 콘텍스트에 대입하는 메소드로, 이미지를 가져오는 getImageData()와 반대의 기능을 가진다. 다음 샘플은 첫 번째 캔버스 요소에 이미지를 배치하고 getImageData()로 화소 배열을 가져온다. 모노크롬 값을 계산하여 새로 작성한 ImageData 객체에 값을 할당하고 두 번째 캔버스 요소에 putImageData()를 사용해 값을 대입한 모노크롬 사진을 표시한다. HTML index.html JavaScript main.js // 캔버스 요소 참조 cons..

2022.07.27

[JavaScript] 자바스크립트에서 이미지의 RGBA 값 확인하기

207_자바스크립트에서 이미지의 RGBA 값 확인하기 [적용] 마우스가 가리키는 이미지의 화소 정보를 확인하고 싶을 때 이미지에 포함된 색 정보를 확인하고 싶을 때 [내용] getImageData()를 사용해 마우스 커서가 가리키는 위치의 색 정보를 구할 수 있다. 캔버스 요소를 mousemove 이벤트로 감시하여 마우스 커서의 좌표를 kayerX와 layerY 로 가져온다. getImagedata()의 첫 번째와 두 번쨰 인수에 해당 좌표를 할당하여 화소의 배열을 가져올 수 있다. 화소 정보는 CSS의 rgba()를 통해 표시한다. HTML index.html JavaScript main.js // 캔버스 요소 참조 const canvas = document.querySelector('#my-canva..

2022.07.27

[JavaScript] 자바스크립트에서 캔버스 화소 정보 다루기

206_자바스크립트에서 캔버스 화소 정보 다루기 [적용] 화소 정보를 확인하고 싶을 때 이미지 가공을 위한 화소의 정보를 가져오고 싶을 때 [문법] 메소드 의미 반환 context.getImageData(x, y, width, height) 지정 영역 화소 정보 가져오기 ImageData 객체 [내용] getImageData()를 사용해 캔버스 콘텍스트의 화소 정보를 가져오며, 반환값은 ImageData객체이다. HTML index.html JavaScript main.js // 캔버스 요소 참조 const canvas = document.querySelector('#my-canvas'); // 콘텍스트 가져오기 const context = canvas.getContext('2d'); // 색상 지정 c..

2022.07.27

[JavaScript] 자바스크립트에서 캔버스에 이미지 붙여넣기

205_자바스크립트에서 캔버스에 이미지 붙여넣기 [적용] 외부의 이미지를 캔버스에 표시하고 싶을 때 [문법] 속성 의미 타입 context.drawImage(image, x, y) 캔버스 요소에 이미지 그리기 없음 [내용] Image 객체와 drawImage()를 사용해 캔버스 요소에 이미지를 표시한다. Image 객체의 로딩이 완료되지 않으면 캔버스에 이미지를 그릴 수 없으므로 onload를 사용해 미리 로딩 작업을 처리한다. drawImage()의 두 번째와 세 번째 인수는 좌표 위치를 전달한다. HTML index.html JavaScript main.js // 캔버스 요소 참조 const canvas = document.querySelector('#my-canvas'); // 콘텍스트 가져오기 c..

2022.07.27

[JavaScript] 자바스크립트에서 캔버스 요소 색칠하기/선 그리기

204_자바스크립트에서 캔버스 요소 색칠하기/선 그리기 [적용] 캔버스에 도형을 생성하고 싶을 때 [문법1] 메소드 의미 반환 context.fillStyle 색상과 스타일 문자열 [문법2] 메소드 의미 반환 context.strokeRect(x, y, 폭, 높이) 직사각형 영역 경계 그리기 없음 context.fillRect(x, y, 폭, 높이) 직사각형 영역 색칠하기 없음 [내용] 색칠되는 부분은 도형을 둘러싼 영역이다. fillStyle 속성으로 색상을 지정하고 fillRect()로 색이 들어간 직사각형을 생성한다. fillRect()를 실행하기 전 fillStyle 속성의 설정이 먼저 필요하므로 순서에 주의하자. HTML index.html JavaScript main.js // 캔버스 요소 참..

2022.07.27

[JavaScript] 자바스크립트에서 캔버스 사용하기

203_자바스크립트에서 캔버스 사용하기 [적용] 비트맵 기반의 도형을 스크립트에서 사용하고 싶을 때 [문법] 메소드 의미 반환 canvas.getContext('2d') 캔버스에서 명령 가져오기 콘텍스트 context.fillRect(x, y, 폭, 높이) 직사각형 영역 칠하기 없음 [내용] 캔버스(Canvas) 요소는 그래픽 관련 기능을 한다. SVG는 벡터 그래픽을 다루지만, 캔버스 요소는 비트맵 그래픽을 다룬다. 비트맵은 SVG와 달리 확대, 축소 시 사이즈를 적절히 조절하지 않으면 화질 저하가 발생한다. SVG는 일러스트 등에 적합하지만, 이미지 가곡 등의 작업은 캔버스 요소가 유용하다. 캔버스 요소 사용을 위해서는 HTML에 캔버스 요소를 배치한 뒤, 자바스크립트로 요소의 id 값을 참조하고 그..

2022.07.26

[JavaScript] 자바스크립트에서 SVG 그래픽 다운로드하기

202_자바스크립트에서 SVG 그래픽 다운로드하기 [적용] SVG로 작성한 그래픽을 다운로드하고 싶을 때 [내용] SVG 요소는 자바스크립트를 사용해 파일로 다운받을 수 있으며, 이미지 생성 서비스 등에 활용할 수 있다. document.querySelector()로 SVG 요소를 참조하고 outerHTML 속성으로 문자열을 가져온다. 브라우저에 따라 다운로드 방법이 다르므로 각각 적절한 데이터 형식으로 변환한다. 샘플을 통해 SVG 요소의 다운로드 방법을 확인해 보자. HTML index.html 다운로드 JavaScript main.js // 다운로드 버튼 클릭 시 작업 document.querySelector('#btnSave').addEventListener('click', saveFile); /..

2022.07.26