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