Canvas의 toBlob() 함수 Canvas Element에는 toBlob() 함수가 있다. 이 함수를 이용하면 jpeg, png, webp로 데이터를 받아올 수 있다. 굳이 서버에서 이미지를 변환할 필요가 없다. 이미지 포맷을 변환하는 프로그램을 간단히 만들 수 있으며, 서버로 보내기전에 webp로 바꾸어 전송하면 트래픽 사용량과 저장공간도 아낄 수 있다. 이 글에서는 이 변환하는 방법을 설명한다. 어떻게 동작하나? 이미지를 로드하고 canvas를 만들어 이미지를 그린다. 그리고 canvas의 toBlob을 이용해 이미지 포맷을 변경하는 것이다. 다음은 화면에 보이든, 서버로 보내든, 다운로드하든 필요한 작업을 하면 된다. 간단히 의미별로

load는 디코딩을 포함하지 않는다. 이미지를 서버에서 다운로드 받아오면 ‘load’이벤트가 발생한다. 이 것을 이용해서 이미지가 로드되었음을 확인할 수 있는 데, 이미지는 주로 압축이 되어있기 때문에 decoding을 거쳐 pixel단위의 데이터로 변경되어야 화면에 그릴 수 있다. 이 디코딩은 언제 실행되는 지가 궁금했는 데, decoding의 속성에 따라서 실제 decoding의 실행시점이 달라지게 된다. Decoding은 필요한 경우에만 실행된다. 실제 화면에 그리는 작업을 하지 않으면 decoding이 필요가 없기 때문에 브라우저는 이미지를 다운로드 받았다고 decoding을 하지 않는다. load이벤트가 발생했다고 즉시 화면에 그릴 수 있다는 뜻이 아니라는 것이다. 실제 decoding 일어

순서를 바꿀 수 있을지는 모르지만.. 일단 학습 순서대로 올려야 하겠지만.. 급하면 그냥..

막 올려야지...