如何证明两个HTML页面看起来相同? [英] How can I prove that two HTML pages look identical?
本文介绍了如何证明两个HTML页面看起来相同?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
例如，我有这个:
<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>我希望第二个看起来像第一个.
And I want the second one to look exactly like the first.
我相信它们看起来是相同的，但是我唯一的证明是使用了旧的在Windows真正的快速浏览和眼球跟踪之间来回切换"技术.(天文学家称其为眨眼比较器"- https://en.wikipedia.org/wiki/Blink_comparator ).我确保窗户的大小和位置相同.但是，如果渲染的HTML不能在屏幕上显示，则可能太困难了.
I believe those look identical, but my only proof was to use the old "switch back and forth between windows real quick and eyeball it" technique. (Astronomers call this a "blink comparator" -- https://en.wikipedia.org/wiki/Blink_comparator ). I made sure the windows were the same size and in the same position. But if the rendered HTML didn't fit on the screen this might have been too difficult.
是否有更确定的工具或方法来进行这种比较?
Is there a more definitive tool or method to do this comparison?
我在Chrome 77.0.3865.120和Firefox 69.0.3中都查看了这些内容.
I looked at these in both Chrome 77.0.3865.120 and Firefox 69.0.3.
例如，我知道使用最初是Web Standards Project一部分的浏览器Acid测试- https://www.acidtests.org/-像素完美渲染是基准.
I know for instance that with the browser Acid tests that were originally part of the Web Standards Project -- https://www.acidtests.org/ -- pixel perfect rendering was the benchmark.
(额外的功劳:第二个代码段的HTML可能足以满足我的需求；如果您愿意提出改进建议，将是值得欢迎的.)
(Extra Credit: The HTML for the second code snippet is probably adequate for my needs; if you care to suggest improvements those would be welcome.)
编辑:我的问题比较了两个小的HTML示例，这些示例可以呈现为适合浏览器的可见部分.但总的来说，我想知道HTML的答案可能会很长.
EDIT: My question compares two small HTML samples, which can be rendered to fit on the visible portion of the browser. But in general I would like to know the answer for HTML that could be quite long.
推荐答案
在开发与CSS相关的内容时，我做过类似的事情Webiste .我必须将HTML/CSS生成的输出与以前使用HTML/CSS生成的图像进行比较.
I have done something similar when developing a CSS related webiste. I had to compare an output produced by a HTML/CSS with an image that was previously generated with a HTML/CSS.
我使用了 dom-to-image ，它将代码转换为base64-编码的图像.我将此图像放在画布中，然后使用 pixelmatch 在这两个图像之间进行比较.
I used dom-to-image, which converts code to a base64-encoded image. I place this image inside a canvas and then use pixelmatch to compare between both images.
这里是一个例子来说明:
Here is an example to illustrate:
var node1 = document.querySelector("pre");
var node2 = document.querySelector(".div");
var canvas1 = document.querySelector(".first");
var canvas2 = document.querySelector(".second");
var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");
/* Change both code to Image and put inside Canvas */
domtoimage.toPng(node1)
.then(function(dataUrl) {
var image = new Image();
image.onload = function() {
ctx1.drawImage(this, 0, 0);
};
image.src = dataUrl;
})
domtoimage.toPng(node2)
.then(function(dataUrl) {
var image = new Image();
image.onload = function() {
ctx2.drawImage(this, 0, 0);
};
image.src = dataUrl;
})
/* Run the pixel matching*/
setTimeout(function() {
var im_r = ctx1.getImageData(0, 0, 300, 300).data;
var im_o = ctx2.getImageData(0, 0, 300, 300).data;
var pixDiff = pixelmatch(im_r, im_o, false, 280, 280, {
threshold: 0.1
});
console.log(pixDiff);
}, 3000);canvas {
border: 1px solid;
}
pre,
.div {
border: 2px solid red;
width: 300px;
height: 300px;
box-sizing: border-box;
margin: 0;
}<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/dom-to-image.js"></script>
<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/pixel.js"></script>
<pre>
sun<br/>
mercury <br/>
venus <br/>
earth <br/>
mars <br/>
jupiter <br/>
saturn <br/>
</pre>
<div class="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>
<canvas width="300" height="300" class="first"></canvas>
<canvas width="300" height="300" class="second"></canvas>在上面的代码中，我们有2个HTML块和2个画布，在其中绘制我们的块.如您所见，JS非常简单.最后的代码运行像素匹配，并显示两个画布有多少个不同的像素.我添加了一个延迟，以确保同时加载两个图像(以后可以通过一些事件进行优化)
In the above code, we have our 2 HTML blocks and 2 canvases where we will paint our blocks. As you can see, the JS is quite simple. The code at the end runs pixel matching and shows how many different pixels both canvases have. I added a delay to make sure both images are loaded (you can optimize later with some events)
您还可以考虑使用第三个画布来突出显示两个图像之间的差异并获得视觉差异:
You can also consider a third canvas to highlight the difference between both images and obtain your visual difference:
var node1 = document.querySelector("pre");
var node2 = document.querySelector(".div");
var canvas1 = document.querySelector(".first");
var canvas2 = document.querySelector(".second");
var canvas3 = document.querySelector(".result");
var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");
var ctx3 = canvas3.getContext("2d");
/* Change both code to Image and put inside Canvas */
domtoimage.toPng(node1)
.then(function(dataUrl) {
var image = new Image();
image.onload = function() {
ctx1.drawImage(this, 0, 0);
};
image.src = dataUrl;
})
domtoimage.toPng(node2)
.then(function(dataUrl) {
var image = new Image();
image.onload = function() {
ctx2.drawImage(this, 0, 0);
};
image.src = dataUrl;
})
/* Run the pixel matching*/
setTimeout(function() {
var im_r = ctx1.getImageData(0, 0, 300, 300).data;
var im_o = ctx2.getImageData(0, 0, 300, 300).data;
var diff = ctx3.createImageData(300, 300);
var pixDiff = pixelmatch(im_r, im_o, diff.data, 300, 300, {
threshold: 0.1
});
ctx3.putImageData(diff, 0, 0);
console.log(pixDiff);
}, 3000);canvas {
border: 1px solid;
}
pre,
.div {
border: 2px solid red;
width: 300px;
height: 300px;
box-sizing: border-box;
margin: 0;
}<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/dom-to-image.js"></script>
<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/pixel.js"></script>
<pre>
sun<br/>
mercury <br/>
venus <br/>
earth <br/>
mars <br/>
jupiter <br/>
saturn <br/>
</pre>
<div class="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>
<canvas width="300" height="300" class="first"></canvas>
<canvas width="300" height="300" class="second"></canvas>
<canvas width="300" height="300" class="result"></canvas>让我们更改内容以了解一些区别:
Let's change the content to see some difference:
var node1 = document.querySelector("pre");
var node2 = document.querySelector(".div");
var canvas1 = document.querySelector(".first");
var canvas2 = document.querySelector(".second");
var canvas3 = document.querySelector(".result");
var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");
var ctx3 = canvas3.getContext("2d");
/* Change both code to Image and put inside Canvas */
domtoimage.toPng(node1)
.then(function(dataUrl) {
var image = new Image();
image.onload = function() {
ctx1.drawImage(this, 0, 0);
};
image.src = dataUrl;
})
domtoimage.toPng(node2)
.then(function(dataUrl) {
var image = new Image();
image.onload = function() {
ctx2.drawImage(this, 0, 0);
};
image.src = dataUrl;
})
/* Run the pixel matching*/
setTimeout(function() {
var im_r = ctx1.getImageData(0, 0, 300, 300).data;
var im_o = ctx2.getImageData(0, 0, 300, 300).data;
var diff = ctx3.createImageData(300, 300);
var pixDiff = pixelmatch(im_r, im_o, diff.data, 300, 300, {
threshold: 0.1
});
ctx3.putImageData(diff, 0, 0);
console.log(pixDiff);
}, 3000);canvas {
border: 1px solid;
}
pre,
.div {
border: 2px solid red;
width: 300px;
height: 300px;
box-sizing: border-box;
margin: 0;
}<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/dom-to-image.js"></script>
<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/pixel.js"></script>
<pre>
sun<br/>
mercury <br/>
venus <br/>
earth <br/>
mars <br/>
jupiter <br/>
saturn <br/>
</pre>
<div class="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">april</div> <br/>
<div style="text-indent: 12ch">jupiter</div> <br/>
<div style="text-indent: 4ch">saturn</div> <br/>
</div>
<canvas width="300" height="300" class="first"></canvas>
<canvas width="300" height="300" class="second"></canvas>
<canvas width="300" height="300" class="result"></canvas>您可以阅读有关我使用的两个插件如何工作的更多信息，并找到更多有趣的选项.
You can read more about how the two plugins I used work and find more interesting options.
我将尺寸固定为300x300，以使代码段内的演示变得容易，但是您可以考虑使用更大的高度和宽度.
更新
这是一个比较现实的示例，可以在产生相同结果的两个布局之间进行比较.画布的宽度/高度将是动态的，并基于内容.我将仅显示具有差异的最后一个画布.
Here is a more realistic example to compare between two layouts that produce the same result. The width/height of the canvas will be dynamic and based on the content. I will show only the last canvas with the difference.
var node1 = document.querySelector(".flex");
var node2 = document.querySelector(".grid");
var canvas1 = document.querySelector(".first");
var canvas2 = document.querySelector(".second");
var canvas3 = document.querySelector(".result");
canvas1.height= node1.offsetHeight;
canvas2.height= node2.offsetHeight;
canvas3.height= node1.offsetHeight;
canvas1.width= node1.offsetWidth;
canvas2.width= node2.offsetWidth;
canvas3.width= node1.offsetWidth;
var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");
var ctx3 = canvas3.getContext("2d");
domtoimage.toPng(node1)
.then(function(dataUrl) {
var image = new Image();
image.onload = function() {
ctx1.drawImage(this, 0, 0);
};
image.src = dataUrl;
})
domtoimage.toPng(node2)
.then(function(dataUrl) {
var image = new Image();
image.onload = function() {
ctx2.drawImage(this, 0, 0);
};
image.src = dataUrl;
})
setTimeout(function() {
var im_r = ctx1.getImageData(0, 0, canvas1.width, canvas1.height).data;
var im_o = ctx2.getImageData(0, 0, canvas1.width, canvas1.height).data;
var diff = ctx3.createImageData(canvas1.width, canvas1.height);
var pixDiff = pixelmatch(im_r, im_o, diff.data, canvas1.width, canvas1.height, {
threshold: 0.2
});
ctx3.putImageData(diff, 0, 0);
console.log(pixDiff);
}, 3000);.grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
border:2px solid red;
}
h1 {
text-align:center;
grid-column:1/-1;
flex-basis:100%;
}
.flex {
display:flex;
flex-wrap:wrap;
border:2px solid red;
}
.flex > div {
flex-grow:1;
flex-basis:0;
}<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/dom-to-image.js"></script>
<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/pixel.js"></script>
<div class="grid">
<h1>A title here</h1>
<div>
<img src="https://picsum.photos/id/10/200/200" >
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam condimentum mollis. Phasellus faucibus diam quis lorem efficitur, id egestas neque malesuada</div>
<div> Maecenas sollicitudin lacinia finibus. Integer vel varius eros. Morbi et ante eget est mollis sollicitudin.</div>
</div>
<div class="flex">
<h1>A title here</h1>
<div>
<img src="https://picsum.photos/id/10/200/200" >
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam condimentum mollis. Phasellus faucibus diam quis lorem efficitur, id egestas neque malesuada</div>
<div> Maecenas sollicitudin lacinia finibus. Integer vel varius eros. Morbi et ante eget est mollis sollicitudin.</div>
</div>
<canvas width="300" height="300" class="first" style="display:none;"></canvas>
<canvas width="300" height="300" class="second" style="display:none;"></canvas>
<canvas width="300" height="300" class="result"></canvas>让我们使用其他图片:
var node1 = document.querySelector(".flex");
var node2 = document.querySelector(".grid");
var canvas1 = document.querySelector(".first");
var canvas2 = document.querySelector(".second");
var canvas3 = document.querySelector(".result");
canvas1.height= node1.offsetHeight;
canvas2.height= node2.offsetHeight;
canvas3.height= node1.offsetHeight;
canvas1.width= node1.offsetWidth;
canvas2.width= node2.offsetWidth;
canvas3.width= node1.offsetWidth;
var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");
var ctx3 = canvas3.getContext("2d");
domtoimage.toPng(node1)
.then(function(dataUrl) {
var image = new Image();
image.onload = function() {
ctx1.drawImage(this, 0, 0);
};
image.src = dataUrl;
})
domtoimage.toPng(node2)
.then(function(dataUrl) {
var image = new Image();
image.onload = function() {
ctx2.drawImage(this, 0, 0);
};
image.src = dataUrl;
})
setTimeout(function() {
var im_r = ctx1.getImageData(0, 0, canvas1.width, canvas1.height).data;
var im_o = ctx2.getImageData(0, 0, canvas1.width, canvas1.height).data;
var diff = ctx3.createImageData(canvas1.width, canvas1.height);
var pixDiff = pixelmatch(im_r, im_o, diff.data, canvas1.width, canvas1.height, {
threshold: 0.2
});
ctx3.putImageData(diff, 0, 0);
console.log(pixDiff);
}, 3000);.grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
border:2px solid red;
}
h1 {
text-align:center;
grid-column:1/-1;
flex-basis:100%;
}
.flex {
display:flex;
flex-wrap:wrap;
border:2px solid red;
}
.flex > div {
flex-grow:1;
flex-basis:0;
}<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/dom-to-image.js"></script>
<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/pixel.js"></script>
<div class="grid">
<h1>A title here</h1>
<div>
<img src="https://picsum.photos/id/10/200/200" >
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam condimentum mollis. Phasellus faucibus diam quis lorem efficitur, id egestas neque malesuada</div>
<div> Maecenas sollicitudin lacinia finibus. Integer vel varius eros. Morbi et ante eget est mollis sollicitudin.</div>
</div>
<div class="flex">
<h1>A title here</h1>
<div>
<img src="https://picsum.photos/id/12/200/200" >
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam condimentum mollis. Phasellus faucibus diam quis lorem efficitur, id egestas neque malesuada</div>
<div> Maecenas sollicitudin lacinia finibus. Integer vel varius eros. Morbi et ante eget est mollis sollicitudin.</div>
</div>
<canvas width="300" height="300" class="first" style="display:none;"></canvas>
<canvas width="300" height="300" class="second" style="display:none;"></canvas>
<canvas width="300" height="300" class="result"></canvas>这篇关于如何证明两个HTML页面看起来相同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
