예를 들어, 나는 이것을 가지고있다 :
<pre>
sun<br/>
mercury <br/>
venus <br/>
earth <br/>
mars <br/>
jupiter <br/>
saturn <br/>
</pre>이:
<div style="font-family:monospace">
<div style="text-indent: 0">sun</div> <br/>
<div style="text-indent: 4ch">mercury</div> <br/>
<div style="text-indent: 4ch">venus</div> <br/>
<div style="text-indent: 8ch">earth</div> <br/>
<div style="text-indent: 8ch">mars</div> <br/>
<div style="text-indent: 12ch">jupiter</div> <br/>
<div style="text-indent: 4ch">saturn</div> <br/>
</div>그리고 두 번째 것이 첫 번째와 똑같이 보이기를 원합니다.
나는 그것들이 똑같아 보인다고 생각하지만, 나의 유일한 증거는 오래된 “창문 사이를 빠르게 전환하고 눈알을 돌리는”기술을 사용하는 것이었다. (천문학 자들은 이것을 “블링크 비교기”( https://en.wikipedia.org/wiki/Blink_comparator ) 라고 부릅니다 ). 창문의 크기와 위치가 같은지 확인했습니다. 그러나 렌더링 된 HTML이 화면에 맞지 않으면 너무 어려울 수 있습니다.
이 비교를 수행하는 데 더 확실한 도구 나 방법이 있습니까?
Chrome 77.0.3865.120과 Firefox 69.0.3 모두에서 이것들을 보았습니다.
예를 들어 원래 웹 표준 프로젝트의 일부인 브라우저 산성 테스트 ( https://www.acidtests.org/)에서 픽셀 퍼펙트 렌더링이 벤치 마크 라는 것을 알고 있습니다.
(추가 크레딧 : 두 번째 코드 스 니펫의 HTML이 아마도 내 요구에 적합 할 것입니다. 개선을 제안하려는 경우 환영받을 것입니다.)
편집 : 내 질문은 브라우저의 보이는 부분에 맞게 렌더링 할 수있는 두 개의 작은 HTML 샘플을 비교합니다. 그러나 일반적으로 꽤 긴 HTML에 대한 답변을 알고 싶습니다.
답변
CSS 관련 웹리스트를 개발할 때 비슷한 작업을 수행했습니다 . HTML / CSS에서 생성 된 출력을 이전에 HTML / CSS로 생성 된 이미지와 비교해야했습니다.
코드를 base64로 인코딩 된 이미지로 변환 하는 dom-to-image를 사용했습니다 . 이 이미지를 캔버스 안에 넣은 다음 pixelmatch 를 사용 하여 두 이미지를 비교합니다.
다음은 설명하는 예입니다.
위의 코드에는 2 개의 HTML 블록과 2 개의 캔버스가 있으며 여기에 블록을 페인트합니다. 보시다시피 JS는 매우 간단합니다. 마지막 코드는 픽셀 일치를 실행하고 두 캔버스에 몇 개의 다른 픽셀이 있는지 보여줍니다. 두 이미지가 모두로드되도록 지연을 추가했습니다 (일부 이벤트로 나중에 최적화 할 수 있습니다)
두 이미지 간의 차이를 강조하고 시각적 차이를 얻기 위해 세 번째 캔버스를 고려할 수도 있습니다.
내용을 변경하여 약간의 차이를 보도록하겠습니다.
내가 사용한 두 가지 플러그인의 작동 방식에 대해 자세히 읽고 더 흥미로운 옵션을 찾을 수 있습니다.
스 니펫 내부에서 데모를 쉽게 볼 수 있도록 크기를 300×300으로 수정하고 있지만 더 큰 높이와 너비를 고려할 수 있습니다.
최신 정보
다음은 동일한 결과를 생성하는 두 레이아웃을 비교하는보다 현실적인 예입니다. 캔버스의 너비 / 높이는 동적이며 내용을 기반으로합니다. 차이점이있는 마지막 캔버스 만 표시하겠습니다.
다른 이미지를 사용합시다 :
답변
실제로 DOM을 사용하여 측정을 수행하는 아이디어가 있습니다. 문제의 텍스트를 쿼리 할 수있는 클래스가있는 div로 바꿨습니다. 그런 다음 모든 노드의 오프셋을 인쇄 할 수 있습니다.
내가 측정 한 것에서 문자 들여 쓰기는 실제로와 동일합니다 .
var nodes = document.getElementsByClassName('measure');
for (var n of nodes) {
console.log(n.offsetLeft);
}.measure {
display: inline-block;
background: red;
width: 50px;
height: 5px;
}<pre>
<div class="measure"></div><br/>
<div class="measure"></div><br/>
<div class="measure"></div><br/>
<div class="measure"></div><br/>
<div class="measure"></div><br/>
<div class="measure"></div><br/>
<div class="measure"></div><br/>
</pre>var nodes = document.getElementsByClassName('measure');
for (var n of nodes) {
console.log(n.offsetLeft);
}.measure {
display: inline-block;
background: red;
width: 50px;
height: 5px;
}<div style="font-family:monospace">
<div style="text-indent: 0"><div class="measure"></div></div> <br/>
<div style="text-indent: 4ch"><div class="measure"></div></div> <br/>
<div style="text-indent: 4ch"><div class="measure"></div></div> <br/>
<div style="text-indent: 8ch"><div class="measure"></div></div> <br/>
<div style="text-indent: 8ch"><div class="measure"></div></div> <br/>
<div style="text-indent: 12ch"><div class="measure"></div></div> <br/>
<div style="text-indent: 4ch"><div class="measure"></div></div> <br/>
</div>답변
두 페이지의 화면을 인쇄하고 픽셀을 비교하십시오.
셀레늄과 같은 웹 드라이버를 사용하고 이미지 파일 (png, jpg 등)로 두 화면을 렌더링 할 수 있습니다-셀레늄에는이 작업을 수행하는 방법이 있으며 유사성을 비교하기 위해 두 픽셀을 읽는 소프트웨어를 작성하십시오.
웹 드라이버는 코드로 제어 할 수있는 브라우저입니다. 웹에서 이미지를 비교하는 소프트웨어를 찾을 수 있습니다.
이 링크에서 자세한 정보를 찾을 수 있습니다 : https://selenium.dev/
답변
먼저 이미지를 캡처해야합니다
캡처 방법 1
키보드 (또는 다른 스크린 샷 도구)의 인쇄 화면 버튼을 사용하십시오.
화면에 맞도록 길거나 넓은 페이지의 경우 각 페이지의 여러 스크린 샷을 찍어 사진 편집기에서 하나로 묶습니다. 큰 페이지의 겹치는 스크린 샷을 만들어 별도의 레이어에 놓은 다음 겹치는 부분을 사용하여 레이어를 병합하기 전에 조각을 정확하게 배치하여 전체 페이지의 합성물을 만들 수 있습니다.
캡처 방법 2
fireshot 과 같은 브라우저 확장 프로그램을 사용 하여 전체 페이지를 한 번에 캡처 할 수 있습니다 .
두 번째로 이미지를 비교합니다
방법 1
-
스크린 샷을 레이어에 붙여 넣습니다.
-
다른 레이어에 붙여 넣어 두 번째 페이지를 반복하십시오.
-
레이어 가시성을 토글하면 모든 변경 사항이 분명합니다. 또는 최상위 레이어의 불투명도를 조정하거나 다른 블렌드 모드를 설정하여 비교하십시오.
방법 2
pixel-perfect-2 와 같은 브라우저 확장 프로그램을 사용하십시오. 내에서 반투명 이미지를 오버레이 할 수있는 . 브라우저 내에서 그리드 이미지로 페이지를 오버레이 할 수 있기 때문에 정렬 및 간격을 확인하는 데 유용한 확장입니다.
방법 3
이미지 diff 도구를 사용하십시오. 빠른 Google 검색은 여기에 나열하기에는 너무 많이 나타납니다. 일부 코드 편집기, 명령 줄 도구, Python 스크립트 및 diffchecker 와 같은 온라인 서비스를위한 이미지 diff 플러그인이 있습니다 .
답변
같은 문서에서 position : absolute; 그리고 자세히 보면 확대 할 수도 있습니다.
#a, #b {
position:absolute;
left:0;
top:0;
margin:0;
padding:0;
color:green;
opacity:0.5;
}
#a {
color:red;
}
#b {
color:green;
}<pre id="a">
sun<br/>
mercury <br/>
venus <br/>
earth <br/>
mars <br/>
jupiter <br/>
saturn <br/>
</pre>
<div style="font-family:monospace" id="b">
<div style="text-indent: 0">sun</div> <br/>
<div style="text-indent: 4ch">mercury</div> <br/>
<div style="text-indent: 4ch">venus</div> <br/>
<div style="text-indent: 8ch">earth</div> <br/>
<div style="text-indent: 8ch">mars</div> <br/>
<div style="text-indent: 12ch">jupiter</div> <br/>
<div style="text-indent: 4ch">saturn</div> <br/>
</div>답변
iframe을 사용하여 두 페이지를 서로 겹쳐 놓습니다. 이를 통해 두 페이지의 차이점을 볼 수 있습니다.
main.html :
<iframe src="doc1.html"></iframe>
<iframe src="doc2.html" style="opacity:0.5"></iframe>
<style>
html, body {
margin:0;
height:100%;
}
iframe {
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>doc1.html :
<pre>
sun<br/>
mercury <br/>
venus <br/>
earth <br/>
mars <br/>
jupiter <br/>
saturn <br/>
</pre>doc2.html
<div style="font-family:monospace">
<div style="text-indent: 0">sun</div> <br/>
<div style="text-indent: 4ch">mercury</div> <br/>
<div style="text-indent: 4ch">venus</div> <br/>
<div style="text-indent: 8ch">earth</div> <br/>
<div style="text-indent: 8ch">mars</div> <br/>
<div style="text-indent: 12ch">jupiter</div> <br/>
<div style="text-indent: 4ch">saturn</div> <br/>
</div>(스택 스 니펫을 사용 하여이 작업을 수행 할 수있는 방법이 있다고 생각합니다. 자유롭게 가르쳐주십시오)
답변
여기에는 정말 복잡하고 영리한 코드 메서드가 있으므로 여기 간단한 방법이 있습니다.
하나의 스크린 샷을 만들어 투명도를 지원하는 이미지 편집기에서 엽니 다.
붙여 넣은 다음 CSS 방식으로 화면을 표시하고 붙여 넣은 두 번째 이미지를 50 %의 불투명도로 설정하여 붙여 넣습니다.
