Rev. 2.73

얼마 전 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

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar