[D+49] 이미지, 캔버스

 

 

국비지원 D+49

-  이미지, 캔버스 -

 

---

 

이미지

우리가 HTML, CSS, javaScript를 사용해서 이미지를 넣어준다고 생각했을 때 기존에 우리가 text-animation을 넣는다고 단순하게 생각하면 안된다.

 

예를들면, 내가 3개의 section중에서 0번째 섹션창에 이미지를 넣는다고 설정해보자.

이때 화면의 해상도나 내가 설정한 윈도우 창의 크기에 따라서 section0의 크기는 변하게 될 것이고, 이에 따라서 내가 넣은 이미지의 크기와 동작 범위도 변화해야 한다.

그렇기 때문에 이미지를 넣을때, 절대적인 값을 넣어주는 것이 아니라 상대값을 넣어서 window창의 크기에 따라서 이미지 크기나 애니메이션 실행범위가 설정되도록 해주어야 한다는 것을 명심해야 한다.

 

• 이미지 압축

이미지는 작은 픽셀들이 모여서 하나의 이미지를 이루며, 이때 픽셀은 3byte로 R, G, B (각각 8bit)로 구성되어 있다.

 

우리는 픽셀의 크기만 가지고 이미지가 크거나 작다고 판단할 수 없는데 1920*1080 이미지를 mb크기로 생각해봤을때 약 5.9mb이며, 만약 해당크기의 이미지가 20프레임정도 되는 영화가 있다면 결코 작은 사이즈가 아니다.

 

이런 이미지를 압축하지 않을 경우 저장과 전송이 불가하기 때문에 이미지는 압축과정이 반드시 필요하다.

 

압축에는 크게 유손실 압축과 무손실 압축이 있으며 유손실 압축은 인간이 구별해내기 어려운 색을 제거해내는 과정을 유손실 압축이라고 하며, 무손실압축은 유손실압축이 완료된 이후에 진행하는 압축을 무손실 압축이라고 한다.

 

이때, 유손실 압축과 무손실 압축을 거치는 과정을 인코딩이라고 하며 반대로 사용자에게 뿌려주기 위해 압축을 해제하는 디코딩 과정도 있다. 

(인코딩과 디코딩은 이미지 뿐만 아니라 다른 곳에서도 사용되는 용어이다.)

 

 

---

캔버스

캔버스는 이미지를 올릴때 사용하는 엘리먼트중에 하나로 특히 애니메이션을 활용할 때 사용하기에 편리하다.

 

• graphic context

만약 캔버스에 대한 초기설정을 하나하나 사용자가 다 해도 상관은 없지만 보편적인 값들로 설정되어 있는 도구를 사용하는 것이 훨씬 편리할 수도 있다.

이렇게 캔버스에 드로잉하기 위해 필요한 설정값들의 집합을 graphic context라고 한다.

 

이미지를 화면에 뿌리기 위해서는 먼저 <img>를 사용해 먼저 압축을 푸는 디코딩과정을 거치면서 픽셀의 정볼르 가지는 비트맵형식을 가지게 된다.

이후에 화면에 뿌리는 랜더링과정을 거치게 되는데 이 과정을 바로 canvas의 graphic context가 하는 것이다.