Instagram Engineering Challenge를 풀어 보았습니다.

몇시인가는 풀어 보려고 하고 있었다Instagram Engineering Challenge , 흩어져 있는 절단된 화상을 되돌린다, 라고 하는 문제. 대변 ​​코드라도 좋기 때문에 주말에 도전해 보았다.

사전 쓰기 : 완전 대변 코드이므로 미리 양해 바랍니다

스킬

HTML 서투른, SVG, Canvas 등 이미지 처리 경험 전무, 보시다시피 무모한 스타트입니다만, 여러가지 툴을 만나 즐겁게 해냈습니다.

도구

전부 첫 체험이지만 매우 도움이 되었습니다.

D3 : SVG에 의한 데이터 시각화 툴, 갤러리가 멋지다.

jCanvas : canvas 조작을 편하게 할 수 있는 jQuery 플러그인.

i-color : 컬러 스페이스 변환 도구.

접근

절단 된 이미지를 캔버스에로드하고 각 행에 대해 인접한 색상과 색상의 차이를 찾습니다. 절단이라면 이미지가 연결되지 않기 때문에 차이가 높다.

n 행마다 차이를 구하고, n이 절단 폭과 겹치면 차이가 더욱 높아진다. 라디오 튜닝 이미지? ?

2의 결과에 따라 이미지를 자릅니다.

좌단의 단편을 찾아, 절단면이 가까운 것을 인접해 배열.

코드

길기 때문에 gist에서 제발. 장문주의, 대변 코드주의!!

결과

어드밴티지

컬러 스페이스은 RGB가 아니라 실험실을 사용하는 것으로, 색차 판정이 사람의 눈에서 본 그것에 가깝다.

L *, a *, b *의 비선형 관계는 인간의 눈의 비선형 반응을 모방하려고 시도한 것입니다. - 위키피디아

색차 판정의 결과를 D3에 의해 시각화. 디버깅이나 데이터 해석시에 도움이 된다.

디스 어드밴티지

구타 똥 코드.

컬러 스페이스 변환이나 색 차이 판정이 매우 무거운, Chrome의 프로파일링에 의하면 절반 가까운 처리 시간을 소비하고 있다.

Chrome에서는 정상이지만 Safari에서는 계산 결과가 미묘하게 달라 부러지는 경우가 있다.

시간이 있으면 node.js에서 멀티 스레드로 다시 쓰는 것이 좋습니다.