slimerjs-firefox
Version:
This repo includes slimerjs as well as downloads a local copy of Firefox.
122 lines (114 loc) • 4.86 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>render fix</title>
</head>
<body>
<table border="1">
<tr>
<td><img id="i1" src="slimerjs_capture_adapt.png"></td>
<td><canvas id="c1" width="300" height="500"></canvas></td>
</tr>
<tr>
<td><img id="i2" src="slimerjs_capture_adapt_zoomin.png"></td>
<td><canvas id="c2" width="300" height="800"></canvas></td>
</tr>
<tr>
<td><img id="i3" src="slimerjs_capture_adapt_zoomout.png"></td>
<td><canvas id="c3" width="300" height="500"></canvas></td>
</tr>
<tr>
<td><img id="i4" src="slimerjs_capture_adapt_clip.png"></td>
<td><canvas id="c4" width="100" height="100"></canvas></td>
</tr>
<tr>
<td><img id="i5" src="slimerjs_capture_adapt_clip_zoomin.png"></td>
<td><canvas id="c5" width="100" height="100"></canvas></td>
</tr>
<tr>
<td><img id="i6" src="slimerjs_capture_adapt_clip_zoomout.png"></td>
<td><canvas id="c6" width="100" height="100"></canvas></td>
</tr>
<tr>
<td><img id="i7" src="slimerjs_capture_adapt_scroll.png"></td>
<td><canvas id="c7" width="300" height="500"></canvas></td>
</tr>
<tr>
<td><img id="i8" src="slimerjs_capture_adapt_zoomin_scroll.png"></td>
<td><canvas id="c8" width="300" height="775"></canvas></td>
</tr>
<tr>
<td><img id="i9" src="slimerjs_capture_adapt_zoomout_scroll.png"></td>
<td><canvas id="c9" width="300" height="500"></canvas></td>
</tr>
</table>
<h2>Result:</h2>
<table border="1">
<tr>
<td><img id="ei"></td>
<td><canvas id="ec" ></canvas></td>
</tr>
</table>
<script type="text/javascript">
function fillCanvas() {
var i;
for(i=1; i < 10; i++) {
var im = document.getElementById('i'+i);
var c = document.getElementById('c'+i);
var ctx = c.getContext('2d');
ctx.drawImage(im, 0,0);
}
}
var ec = document.getElementById('ec');
var ei = document.getElementById('ei');
var currentIdx = 0;
ei.addEventListener("load", function(){
ec.width = ei.width;
ec.height = ei.height;
var ctx = ec.getContext('2d');
ctx.drawImage(ei, 0,0);
window.callPhantom();
}, false);
function setResultImage(idx, src ) {
currentIdx = idx;
var c = document.getElementById('c'+idx);
var w = parseInt(c.getAttribute('width'));
var h = parseInt(c.getAttribute('height'));
ec.width = w;
ec.height = h;
ei.src = src;
}
function compareImages(expectedIdx){
var expectedCanvas = document.getElementById('c'+expectedIdx);
var resultCanvas = ec;
var expectedCtx = expectedCanvas.getContext('2d');
var expectedImageData = expectedCtx.getImageData(0, 0, expectedCanvas.width, expectedCanvas.height);
var resultCtx = resultCanvas.getContext('2d');
var resultImageData = resultCtx.getImageData(0, 0, resultCanvas.width, resultCanvas.height);
var results = [];
results[0] = [expectedImageData.width, resultImageData.width]
results[1] = [expectedImageData.height, resultImageData.height]
results[2] = [expectedImageData.data.length, resultImageData.data.length]
results[3] = compareImagesData(expectedImageData, resultImageData);
return results;
}
// during zoom in or zoom out, the rendering engine could add some blur around
// each edge of squares. So we should not match equality of color, but we should
// see if colors are almost equals.
function compareImagesData(img1,img2){
if(img1.data.length != img2.data.length)
return 0;
for(var i = 0; i < img1.data.length; i+=4){
var d1=Math.abs(img1.data[i]-img1.data[i]);
var d2=Math.abs(img1.data[i+1]-img1.data[i+1]);
var d3=Math.abs(img1.data[i+2]-img1.data[i+2]);
var similarity = Math.round( 100 - (d1+d2+d3)/(3*255) * 100);
if(similarity < 98)
return i;
}
return true;
}
</script>
</body>
</html>