Rev. 2.73

HTML5 Canvas 기반 이미지 비교 - JS-ImageDiff

얼마 전 Flotr2를 배포한 Humble software development에서 만든 JS-ImageDiff는 HTML5 Canvas 요소를 이용하여 이미지의 변동사항을 비교할 수 있게 하는 자바스크립트로 작성된 작은 유틸리티입니다. Node.JS용으로도 배포되었으며 사용법과 실행 결과는 다음과 같습니다. 

var a = new Image()
  , b = new Image()
  , count = 0
  , canvas, context, c;

a.onload = b.onload = function () {
  count++;
  
  // Both images have loaded.
  if (count >= 2) {
    canvas = imagediff.createCanvas();
    canvas.width = 200;
    canvas.height = 200;
    context = canvas.getContext('2d');
    c = imagediff.diff(a, b);
    context.putImageData(c, 0, 0);
    document.body.appendChild(canvas);
  }
};

a.src = '/image/a.jpg';
b.src = '/image/b.jpg';

document.body.appendChild(a);
document.body.appendChild(b);

Comments

IE 버전에 따른 하위 호환성을 HTML만으로 구분

하위 버전 의존도가 높은 IE에서 호환성을 유지하기 위해 다양한 방법의 트릭들으로 스타일을 유지해 왔습니다. IE 관련 스타일 이슈들이 디펙되어 가는 모습은 마치 게임속의 몹을 잡는듯한 희열을 안겨주지만, 스파게티가 되어가는 코드들을 짜고 앉아 있자니 마음 한구석이 짠해지는 경험을 이 바닥에 있는 분이라면 다들 경험해 보셨을 거란 생각을 합니다. 기획자분이 불현듯 출현해 졸라 미안한 표정으로 "IE6 하위 호환성은 이제 우리도 포기한대요."라는 대사를 칠까 봐 두렵기까지 합니다. 시맨틱이고 나발이고 밑바닥부터 다시 재작성해야 할 공산이 크니까요. 이러한 상황에 대응하기 적합한 새로운 트릭이 있어 여기에 공유합니다. 바로 조건부 주석을 십분 활용하는 것이죠.

<!--[if lt IE 7 ]><body class="source ie ie6"><![endif]--> 
<!--[if lt IE 8 ]><body class="source ie ie7"><![endif]--> 
<!--[if gte IE 8 ]><body class="source ie"><![endif]--> 
<!--[if !IE]><!--><body class="source"><!--<![endif]-->

이 코드는 body 요소에 IE 버전을 구분할 수 있는 클래스 이름을 지정하여 CSS 핵으로 떡칠이 되어있는 스타일 시트를 이제 클래스 이름만으로 깔끔하게 구분할 수 있게 되었습니다. 하지만 IE 계열 브라우저에서만 사용되는 코드들 때문에 불필요한 로딩지연으로 선량한 브라우저들이 피해를 받는다고요?

<link rel="stylesheet" href="/css/style.css" type="text/css" />
<!--[if lt IE 7 ]><link rel="stylesheet" href="/css/ie6.css" type="text/css" /><![endif]--> 
<!--[if lt IE 8 ]><link rel="stylesheet" href="/css/ie7.css" type="text/css" /><![endif]--> 
<!--[if gte IE 8 ]><link rel="stylesheet" href="/css/ie8.css" type="text/css" /><![endif]-->

요렇게 하면 아예 버전별로 스타일을 구분하여 로드할 수 있습니다. IE6 호환성을 해제하려면 ie6.css만 제거하는 것으로 간단하게 해결되지요. 물론, 더 응용하면 하위 IE가 아니거나 하위 버전에서만 필요로 하는 자바스크립트 컴포넌트나 모듈을 구분하여 작성하고 위와 같이 로드할 수도 있겠습니다.

Comments

Dropbox 무료계정 용량 늘리기 대행 - 라이프해커 2.0

스크린샷 2012-02-24 오전 12.59.48.png

라이프해커 2.0에서 제공하는 서비스:

1) Dropbox 무료계정: 무료 계정은 현재 용량이 얼마인지와 상관없이 가장 빠른 시간내에 최종 용량을 미니멈 18GB까지 확장시켜 드립니다. 오다가 접수된후 용량이 18GB까지 늘어나는데 소요되는 시간은 일반적으로 48시간을 초과하지 않습니다. 드롭박스의 기타 이벤트와 베타 테스트에 미리 참여하셨던 일부 고객분들은, 저희 서비스를 이용하셔서 최종 용량을 20GB ~ 24GB(무료 계정)로 만드셨습니다. 아무튼, 저희는 여러분들의 현재 용량/이벤트 참여여부와 상관없이, Dropbox에서 주는 16GB의 보너스용량 미만부분을 모두 채워 드립니다.

2) Dropbox Pro 계정: 유료 서비스 사용자는 저희를 통해, 최고로 32GB의 용량을 별도로 얻으실 수 있으며, 나중에 유료 서비스를 해제하실 경우에도 32GB의 용량을 계속 무료로 사용하실 수 있게 되십니다. 유료계정의 서비스는 별도의 채널을 통해서 진행되기에, 이 곳에서 미리 선결재를 하지 마시고 lifehacker3.0+Pro@gmail.com으로 이메일을 보내셔서 요구되는 자료와 가격 및 결재방법을 확인하신후 진행 부탁드립니다.

관련 참고 링크:

  • 무료계정 용량 늘리기 대행: http://geek2live.org/archives/2365
  • Dropbox의 보너스 용량 방침: dropbox.com/help/200
  • 현재 자신의 Dropbox 용량 확인: dropbox.com/account
  • 드롭박스 리퍼롤 현황 기입요구 사항: http://goo.gl/Xbli2

위 첨부한 화면은 제 드랍박스의 무료계정 정보입니다. 야매 냄새가 물씬 풍기는 것이, 언제 중단될지 모르니 서두르는게 좋겠네요. 이건 시간투자 대비 무조건 이득입니다. 드랍박스를 사랑하고 $7.50(PayPal)이 아깝지 않은 대인배(?)시라면 지금 당장 신청하세요~ ^^

Comments