이상청 : CSS Position과 Canvas, html link를 사용한 곰돌이 아바타

목표 :

• CSS Position을 이용해 api 응답값에 대응하는 여러 png  이미지를 하나의 영역 내 겹쳐서 곰돌이 아바타 생성
• html2canvas를 사용해 곰돌이 아바타 영역에 대한 uri 생성 후 html link 속성을 이용해 로컬 다운로드 가능

cf) html2canvas와 aws s3 간의 보안 정책상 제약 때문에 로컬의 이미지 사용하는 방식으로 진행함

 

💙 CSS Position의 relative와 absolute 간의 관계 사용해 곰돌이 아바타 생성

겹쳐야 할 여러 png 이미지들

 

1. 부모 relative이고 자식이 absolute인 경우 부모를 기준으로 자리를 잡음

 

2.html2Canvas의 datatoURL 이용해 URI 생성하고 html a 태그에 href와 download 파일 명을 지정해 클릭시 해당 이미지가 다운로드 되도록 함