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

Improved Demo

Browse Source
This commit is contained in:
Chinmay Pandhare
2017-07-17 15:54:56 +05:30
parent dc9b9bcde3
commit b963dfd297
1 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
examples/fisheye.html
View File

@@ -34,7 +34,6 @@
<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>
@@ -55,30 +54,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 demoimage = document.querySelector('#demo');
var insrc; var insrc;
demoimage.onload = function() { image.onload = function() {
canvas.width = image.width; canvas.width = image.naturalWidth;
canvas.height = image.height; canvas.height = image.naturalHeight;
context.drawImage(image,0,0); context.drawImage(image,0,0);
insrc = canvas.toDataURL(); insrc = canvas.toDataURL();
image.onload = null;
image.height = image.width * 99 / 130; // Android Chrome Fix
} }
demoimage.src = image.src; var desc = document.querySelector(".lead");
const text = document.querySelector(".lead").innerHTML; const text = desc.innerHTML;
var sequencer = ImageSequencer(); var sequencer = ImageSequencer();
image.onclick = function() { image.onclick = function() {
if (document.querySelector('#grid').getAttribute('class') == "original") { if (desc.innerHTML == text) {
sequencer.loadImage(insrc).addSteps('fisheye-gl',{Fx:0.04,Fy:0.11,scale:1.1}).run(function(out){ sequencer.loadImage(insrc)
document.querySelector('#grid').src = out; .addSteps('fisheye-gl',{Fx:0.04,Fy:0.11,scale:1.1})
.run(function(out){
image.src = out;
}); });
document.querySelector('#grid').className = "processed"; desc.innerHTML = "Click on image to restore original";
document.querySelector(".lead").innerHTML = "Click on image to restore original";
} }
else { else {
document.querySelector('#grid').src = "grid.png"; image.src = "grid.png";
document.querySelector('#grid').className = "original"; desc.innerHTML = text;
document.querySelector(".lead").innerHTML = text;
} }
} }