eessppeelllloo/image-sequencer
1
0
Fork 0
mirror of https://github.com/publiclab/image-sequencer.git synced 2025-12-10 10:20:00 +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">
<img src="grid.png" id="grid" style="cursor:pointer" class="original">
<img src="grid.png" id="demo" style="display:none">
</div>
</div>
@@ -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;
}
}
</script>