80 lines
1.7 KiB
HTML
80 lines
1.7 KiB
HTML
<h3>Lancelot Viewer</h3>
|
|
|
|
<p>
|
|
Zoom:
|
|
<input name="zoom" id="z1" type="radio" checked="Checked">1x</input>
|
|
<input name="zoom" id="z2" type="radio">2x</input>
|
|
<input name="zoom" id="z4" type="radio">4x</input>
|
|
</p>
|
|
|
|
<p><table>
|
|
<tr>
|
|
<td><input name="imgselect" id="baseline" type="radio" checked="Checked">Baseline</input></td>
|
|
<td>%1</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input name="imgselect" id="rendered" type="radio">Rendered</input></td>
|
|
<td>%2</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input name="imgselect" id="compared" type="radio">Differences</input></td>
|
|
<td></td>
|
|
</tr>
|
|
</table></p>
|
|
|
|
|
|
<p>
|
|
<canvas id="c" width="800" height="800"></canvas>
|
|
</p>
|
|
|
|
<script>
|
|
var canvas = document.getElementById("c");
|
|
var context = canvas.getContext("2d");
|
|
var cat = new Image();
|
|
cat.src = "%1";
|
|
var z = 1;
|
|
cat.onload = function() {
|
|
context.mozImageSmoothingEnabled = false;
|
|
context.drawImage(cat, 0, 0, z*cat.width, z*cat.height);
|
|
};
|
|
|
|
var bbut = document.getElementById("baseline");
|
|
bbut.onclick = function() {
|
|
cat.src = "%1";
|
|
};
|
|
|
|
var rbut = document.getElementById("rendered");
|
|
rbut.onclick = function() {
|
|
cat.src = "%2";
|
|
};
|
|
|
|
var cbut = document.getElementById("compared");
|
|
cbut.onclick = function() {
|
|
cat.src = "%3";
|
|
};
|
|
|
|
function setZoom(zoom)
|
|
{
|
|
z = zoom;
|
|
canvas.width = z*800;
|
|
canvas.height = z*800;
|
|
context.mozImageSmoothingEnabled = false;
|
|
context.drawImage(cat, 0, 0, z*cat.width, z*cat.height);
|
|
}
|
|
|
|
var z1but = document.getElementById("z1");
|
|
z1but.onclick = function() {
|
|
setZoom(1);
|
|
};
|
|
|
|
var z2but = document.getElementById("z2");
|
|
z2but.onclick = function() {
|
|
setZoom(2);
|
|
};
|
|
|
|
var z4but = document.getElementById("z4");
|
|
z4but.onclick = function() {
|
|
setZoom(4);
|
|
};
|
|
</script>
|