eessppeelllloo/image-sequencer
1
0
Fork 0
mirror of https://github.com/publiclab/image-sequencer.git synced 2025-12-11 10:49:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

demo for FisheyeGl - Bugfixes

Browse Source
This commit is contained in:
Chinmay Pandhare
2017-07-17 11:23:35 +05:30
parent 8d8cf33d23
commit 43d55d2781
1 changed files with 19 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
examples/fisheye.html
View File

@@ -34,6 +34,7 @@
<div class="panel ismod-image-select" style="display:flex;justify-content:center"> <div class="panel ismod-image-select" style="display:flex;justify-content:center">
<img src="grid.png" id="grid" style="cursor:pointer" class="original"> <img src="grid.png" id="grid" style="cursor:pointer" class="original">
<img src="grid.png" id="demo" style="display:none">
</div> </div>
</div> </div>
@@ -54,27 +55,31 @@
var canvas = document.createElement('canvas'); var canvas = document.createElement('canvas');
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
var image = document.querySelector('#grid'); var image = document.querySelector('#grid');
var datauri; var demoimage = document.querySelector('#demo');
image.onload = function() { var insrc;
demoimage.onload = function() {
canvas.width = image.width; canvas.width = image.width;
canvas.height = image.height; canvas.height = image.height;
context.drawImage(image,0,0); context.drawImage(image,0,0);
datauri = canvas.toDataURL(); insrc = canvas.toDataURL();
} }
demoimage.src = image.src;
const text = document.querySelector(".lead").innerHTML;
var sequencer = ImageSequencer(); var sequencer = ImageSequencer();
document.querySelector('#grid').onclick = function() { image.onclick = function() {
if (image.className == "original") { if (document.querySelector('#grid').getAttribute('class') == "original") {
sequencer.loadImage(datauri).addSteps('fisheye-gl',{Fx:0.04,Fy:0.11,scale:1.1}).run(function(out){ 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').src = out;
}); });
image.className = "processed"; document.querySelector('#grid').className = "processed";
document.querySelector("#lead").innerHTML = "Click on image to restore original"; document.querySelector(".lead").innerHTML = "Click on image to restore original";
} }
else { else {
image.src = "grid.png"; document.querySelector('#grid').src = "grid.png";
image.className = "original"; document.querySelector('#grid').className = "original";
} document.querySelector(".lead").innerHTML = text;
}
} }
</script> </script>