1. 제품
  2.   영상
  3.   Node.js
  4.   LooksSame
 
  

이미지 비교를 위한 무료 Node.js API

이미지를 픽셀 단위로 비교하는 오픈 소스 Node.js 기반 API. Node.js 애플리케이션에서 이미지 비교를 위한 강력하고 유연하며 효율적인 솔루션.

이미지 비교는 소프트웨어 개발에서 중요한 역할을 하는데, 특히 시각적 회귀 테스트, 이미지 품질 보증, 픽셀 완벽한 디자인 검증과 같은 분야에서 그렇습니다. 여러 플랫폼에서 일관된 UI 모양을 보장하는 소프트웨어를 개발하든 프로덕션 파이프라인에서 시각적 검사를 자동화하든 효율적인 이미지 비교 도구가 필수적입니다. Gemini-Testing에서 개발한 오픈소스 API인 LooksSame은 직관적인 기능으로 이미지 비교를 위한 소프트웨어 생성 프로세스를 간소화합니다. 라이브러리에는 픽셀별 이미지 비교, 앤티 앨리어싱 감지, 허용 오차 제어 구성, 이미지 크기 처리, Promises 지원 등 여러 가지 중요한 기능이 있습니다.

LooksSame은 이미지 비교를 위해 설계된 Node.js 기반 API입니다. 개발자는 렌더링 환경의 차이로 인해 발생할 수 있는 사소한 변형을 처리하는 옵션과 함께 이미지를 픽셀별로 비교할 수 있습니다. 소프트웨어 개발자는 라이브러리를 활용하여 사소한 변형을 무시하면서 상당한 시각적 차이를 감지하는 자체 애플리케이션을 빌드할 수 있습니다. API는 주로 개발자가 UI 디자인에서 일관성을 유지하도록 돕는 데 중점을 두고 있지만, 다재다능하기 때문에 다른 많은 이미지 비교 사용 사례에도 적합합니다. 간단한 API와 사용자 정의 가능한 옵션을 갖춘 LooksSame은 모든 개발자 툴킷에 훌륭한 추가 기능이며, 특히 웹 기반 UI 테스트, 자동화된 이미지 생성 및 시각적 정확성이 가장 중요한 다른 시나리오에 적합합니다.

Previous Next

LooksSame 시작하기

LooksSame을 설치하는 권장 방법은 NPM을 사용하는 것입니다. 원활한 설치를 위해 다음 명령을 사용하세요.

NPM을 통해 LooksSame 설치

npm install looks-same

Node.js 앱에서의 기본 이미지 비교

오픈 소스 LooksSame 라이브러리는 소프트웨어 개발자가 Node.js 애플리케이션 내에서 기본 이미지 비교를 쉽게 수행할 수 있도록 해줍니다. 설치가 완료되면 코드에서 LooksSame 모듈을 요구하여 두 이미지를 비교할 수 있습니다. 다음은 라이브러리를 사용하여 두 이미지가 시각적으로 동일한지 확인하는 방법을 보여주는 기본 예입니다. 이 예에서 image1.png와 image2.png를 비교합니다. 시각적으로 동일하면 equal은 true를 반환하고 그렇지 않으면 false를 반환합니다.

Node.js 앱에서 두 이미지를 비교하는 방법?

const looksSame = require('looks-same');

// Compare two images
looksSame('image1.png', 'image2.png', (error, { equal }) => {
    if (error) {
        console.error('Error comparing images:', error);
    } else if (equal) {
        console.log('Images are identical!');
    } else {
        console.log('Images differ!');
    }
});

허용 오차 기반 이미지 비교

픽셀 완벽한 일치가 필요하지 않은 애플리케이션의 경우 소프트웨어 개발자는 허용 오차 수준을 추가할 수 있습니다. 이를 통해 다른 브라우저나 운영 체제에서 렌더링으로 인한 변경 사항과 같은 이미지 간의 작은 차이를 무시할 수 있습니다. 다음 코드 예제에서 허용 오차는 5%로 설정되어 작은 픽셀 변화(최대 5%)로 인해 이미지가 다른 것으로 간주되지 않습니다.

Node.js 앱 내에서 허용 오차 기반 이미지 비교를 수행하는 방법은 무엇입니까?

cfunction compareWithTolerance(image1, image2, toleranceLevel) {
    looksSame(image1, image2, { tolerance: toleranceLevel }, (error, { equal }) => {
        if (error) {
            console.error('Error comparing images:', error);
        } else if (equal) {
            console.log('Images are visually identical within tolerance!');
        } else {
            console.log('Images differ!');
        }
    });
}

// Usage
compareWithTolerance('image1.png', 'image2.png', 5);  // 5% tolerance

특정 차이점 영역 강조

더 정교한 애플리케이션의 경우 소프트웨어 개발자는 특정 차이점 영역만 식별하고 분석하고 싶을 수 있습니다. LooksSame 라이브러리는 차이점이 발생한 정확한 영역을 보여주는 경계 상자 기능을 제공합니다. 이 함수는 다른 영역의 경계 상자 좌표를 출력하여 변경된 이미지의 특정 부분에 집중하기 쉽게 해줍니다. 다음 예에서는 경계 상자 좌표를 사용하여 이미지를 비교하고 차이점을 강조하는 방법을 보여줍니다.

Node.js 앱을 통해 이미지의 특정 영역 간 차이점을 비교하고 식별하는 방법은 무엇입니까?

function compareWithDiffBounds(image1, image2) {
    looksSame(image1, image2, (error, { diffBounds }) => {
        if (error) {
            console.error('Error comparing images:', error);
        } else {
            console.log('Bounding box of differences:', diffBounds);
        }
    });
}

// Usage
compareWithDiffBounds('image1.png', 'image2.png');

정확한 비교를 위한 앤티앨리어싱 감지

오픈소스 LooksSame 라이브러리를 사용하면 소프트웨어 개발자가 Node.js 애플리케이션 내에서 앤티앨리어싱 감지 방법을 사용하여 이미지 압축을 수행할 수 있습니다. 앤티앨리어싱은 에지 렌더링에 약간의 차이를 도입하기 때문에 이미지를 비교할 때 거짓 양성을 일으킬 수 있습니다. 라이브러리의 ignoreAntialiasing 옵션은 이러한 거짓 양성을 방지하는 데 도움이 됩니다. 이는 특히 이미지가 다양한 기기나 브라우저에서 다르게 렌더링되지만 시각적으로는 여전히 동일한 애플리케이션에 유용합니다.

 한국인