diff --git a/examples/fisheye.html b/examples/fisheye.html
index 0537a4e7..b9e1cd9b 100644
--- a/examples/fisheye.html
+++ b/examples/fisheye.html
@@ -34,6 +34,7 @@

+
@@ -54,27 +55,31 @@
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var image = document.querySelector('#grid');
- var datauri;
- image.onload = function() {
+ var demoimage = document.querySelector('#demo');
+ var insrc;
+ demoimage.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image,0,0);
- datauri = canvas.toDataURL();
+ insrc = canvas.toDataURL();
}
+ demoimage.src = image.src;
+ const text = document.querySelector(".lead").innerHTML;
var sequencer = ImageSequencer();
- document.querySelector('#grid').onclick = function() {
- if (image.className == "original") {
- sequencer.loadImage(datauri).addSteps('fisheye-gl',{Fx:0.04,Fy:0.11,scale:1.1}).run(function(out){
- document.querySelector('#grid').src = out;
- });
- image.className = "processed";
- document.querySelector("#lead").innerHTML = "Click on image to restore original";
+ image.onclick = function() {
+ if (document.querySelector('#grid').getAttribute('class') == "original") {
+ sequencer.loadImage(insrc).addSteps('fisheye-gl',{Fx:0.04,Fy:0.11,scale:1.1}).run(function(out){
+ document.querySelector('#grid').src = out;
+ });
+ document.querySelector('#grid').className = "processed";
+ document.querySelector(".lead").innerHTML = "Click on image to restore original";
}
- else {
- image.src = "grid.png";
- image.className = "original";
- }
+ else {
+ document.querySelector('#grid').src = "grid.png";
+ document.querySelector('#grid').className = "original";
+ document.querySelector(".lead").innerHTML = text;
+ }
}