그냥 시간 좀 남으면 허접한 내 코드좀 봐줭 ...


html5 에서 canvas 라고 기본적으로 2d 그래픽 지원해주는 라이브러리가 있단 말이야.

ctx.fillRect ... 이런 종류의 그래픽함수를 자바스크립트에서 지원해줘서 html5 가 뜨기시작한 꽤 옛날부터 엄청 많은 사이트에서 쓰이고 있어.

그래프나 웹게임 에서도 svg 아니면 canvas 로 다 짜는데,

좀 화려한 그래픽 말고, 그 옛날에 커뮤니티 사이트에서 가입하고 프로필 이미지 사용자 닉네임 앞글자로 만들 때,

백엔드에서 직접 이미지 만들어서 서버에 저장했던 적이 있지?

이런건 이젠 거의 프론트엔드에서 처리하지.


근데 canvas 객체에서 이미지를 만든다해도 이미지 태그같이 이미지 데이터를 첨부하는게 귀찮다는 사실을 발견했어.

그래서 이 프로그램은 캔버스에 그려진 이미지데이터를 이미지 태그에 "cvs-src" 라는 가상 속성을 만들어서,

캔버스이 일정한 영역을 잘라서 img 태그에 base64 포맷으로 가져와 그려줘.

<canvas id='cvs'></canvas> <img cvs-src='cvs::(0,0)' />

이것 처럼 캔버스 아이디로 캔버스를 특정한뒤 canvasId::(x,y) 같은 형식을 입력해주면 되는 부분이야.

(샘플 : https://htmlpreview.github.io/?https://github.com/shape-of-myHeart/Img.js/blob/master/index.html)

(코드 : https://github.com/shape-of-myHeart/Img.js/blob/master/index.html)



좀 신박한건, ctx.fillRect 같은 네이티브 그리기 함수가 실행될 때, 자동으로 모든 변경사항이 참조하는 이미지 태그에 업데이트 되는거지.

사용자가 따로 업데이트됬다고 안알려줘도 말이지.

사용자는 그냥 캔버스를 평소처럼 사용해주면 된다는 거지.


function addFunctionOnNative(prototype, nativeName, content) { var native = prototype[nativeName]; prototype[nativeName] = function () { native.apply(this, arguments); content.apply(this); } }

이건 이런 방식으로 네이티브 함수의 영역에 업데이트 트리거 함수를 붙혀줘서 가능했어.

사실 wrapper 방식 안썻다고 레딧 형님한테 한소리 들었긴 했지만 ... ㅋ


깃헙주소얌.

https://github.com/shape-of-myHeart/Img.js



아 그리고 깃헙 영어소개는 번역기 돌린거라 ㅋㅋ 내가 지금은 영어 개못해서 말야 ... 헿

레딧에 올렸었는데, 분위기 싸해짐...