[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