PNG 이미지를 비교하는 JavaScript API
JavaScript 앱 내에서 PNG 이미지 비교를 지원하는 오픈 소스 JavaScript 라이브러리. 앤티앨리어싱 무시 및 캐럿 무시로 PNG 이미지 비교를 지원합니다.
JavaScript를 사용하여 이미지와 이미지를 비교하는 것은 상당히 어렵고 어려울 수 있습니다. 잘못된 도구를 선택하는 것도 성능에 큰 영향을 줄 수 있습니다. LookSame은 JavaScript 애플리케이션 내에서 PNG 이미지를 비교하는 기능을 포함하는 오픈 소스 JavaScript 라이브러리이며 모든 컴퓨터에서 즉시 사용할 수 있습니다. 라이브러리는 인간의 색상 인식을 고려하여 만들어졌습니다. 이 라이브러리는 주로 Gemini 유틸리티에 대한 시각적 회귀 테스트의 필요성을 위해 만들어졌습니다.
이 라이브러리를 사용하면 개발자가 JavaScript 명령을 사용하여 두 PNG 이미지의 차이점을 쉽고 빠르게 비교할 수 있습니다. 버퍼 내부의 파일이나 이미지에 대한 경로를 제공하여 PNG 이미지 처리를 지원합니다. 기본 설정을 사용하면 눈에 띄는 차이만 식별되며 특정 차이를 감지해야 하는 경우 엄격한 옵션을 선택하십시오.
라이브러리는 캐럿을 무시하고 이미지 비교, 안티앨리어싱 무시로 이미지 비교, diff 경계 가져오기, diff 클러스터 가져오기, diff 이미지 빌드, diff 이미지를 버퍼로 빌드, 색상 비교와 같은 이미지 비교와 관련된 몇 가지 중요한 기능을 지원합니다. 더 많은.
LookSame 시작하기
NPM을 통해 LookSameis를 설치하는 권장 방법입니다. 다음 명령을 사용하여 설치하십시오.
Install LooksSame via NPM
NPM을 통해 LookSame 설치
npm install looks-same JavaScript 앱 내에서 PNG 이미지 비교
LookSame 라이브러리는 소프트웨어 프로그래머가 Node.js를 사용하여 PNG 이미지를 프로그래밍 방식으로 비교할 수 있는 기능을 제공합니다. PNG 이미지 또는 버퍼에 대한 올바른 경로를 매개변수로 제공해야 합니다. 이미지 비교의 한 가지 간단한 예는 이미지와 함께 DOM 요소의 스크린샷을 찍고 라이브러리를 사용하여 로컬 이미지와 비교하는 것입니다. 또한 RequestLogger를 사용하여 이미지에 대한 요청을 기록하고 Buffer.compare() 메서드를 사용하여 응답 본문을 로컬 파일과 비교할 수 있습니다.
앤티앨리어싱을 무시하여 PNG 이미지 비교
모든 이미지는 픽셀로 구성되며 이러한 이미지를 비교하는 동안 이미지 1의 모든 픽셀 색상을 이미지의 해당 위치에 있는 픽셀 색상과 비교합니다. 따라서 일부 픽셀이 서로 다른 경우 이미지가 일치하지 않음을 알 수 있습니다. 일반적으로 앨리어싱은 프로세서가 부드러운 선을 올바르게 렌더링하기 위해 이미지의 해상도가 매우 낮을 때 발생합니다. 앤티 앨리어싱 기술을 적용하여 보다 부드러운 외관을 제공하므로 환경에 따라 다른 비교 결과를 얻을 수 있습니다. 일부 이미지는 앤티앨리어싱으로 인해 비교 시 차이가 있습니다. LookSame 라이브러리는 앤티 앨리어싱이 발생할 가능성이 있는 특정 픽셀을 무시하여 앤티 앨리어싱 문제를 처리합니다. 이러한 차이점은 기본적으로 무시됩니다.
Every image is made up of pixels and while comparing these images you compare every pixel’s color in image one with the pixel color in the corresponding location of the image. So in case, some pixels are dissimilar, then you can tell the images are not matching. Usually, aliasing happens when an image’s resolution is very low for the processor to correctly render smooth lines. The 안티 앨리어싱 technique is applied to give a smoother appearance and thus you get different comparison results per environment. Some images have differences while comparing them because of antialiasing. The LooksSame library deals with 안티 앨리어싱 issues by ignoring certain of the pixels where 안티 앨리어싱 is likely to have occurred. These differences will be ignored by default.
캐럿 무시에 의한 이미지 비교
무료 LookSame 라이브러리는 자체 애플리케이션 내에서 두 이미지를 비교하면서 입력 상자의 캐럿을 무시하는 기능을 제공했습니다. 텍스트 입력 요소의 텍스트 캐럿은 항상 깜박이기 때문에 시각적 회귀 작업에 어려움이 있습니다. 때때로 두 개의 텍스트 상자 또는 입력 상자 이미지를 비교할 때 이미지가 캐럿을 제공하기 때문에 픽셀 차이에 대한 비교가 실패합니다. 따라서 이러한 diff 무시를 비활성화하는 캐럿 옵션을 무시할 수 있습니다.
