[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 = canvas.toDataURL('image/jpeg');

 

[예시 2]

PNG 이미지로 변환

toDataURL()의 인수에 변환하고 싶은 데이터 형식인 image/png를 지정하면 PNG 형식의 DataURL 문자열이 반환된다.JPEG와 달리 배경이 투명하므로 이미지 아래에 놓인 요소도 표시되며, 가역압축(비손실 압축 방법)의 방식을 사용하므로 화질 저하가 없다.

 

JavaScript                                                                                                                                                          main.js

const data = canvas.toDataURL('image/png');

 

[예시 3]

WebP 이미지로 변환

WebP 형식의 변환도 지원된다.WebP는 새로운 이미지 형식으로 JPEG, PNG와 비교해 용량이 작고 투명한 배경으로 저장할 수 있다.WebP의 변환은 구글 크롭과 마이크로소프트 에지에서만 지원되었으나, 현재는 사파리, 파이어폭스, 오페라 등에서도 지원이 된다.

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김