mirror of
https://github.com/publiclab/image-sequencer.git
synced 2025-12-11 10:49:59 +01:00
89 lines
2.9 KiB
HTML
89 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
|
|
<title>Replace Image Demo | Image Sequencer</title>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF8">
|
|
|
|
<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="../node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
|
<link href="../dist/image-sequencer.css" rel="stylesheet">
|
|
|
|
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
|
|
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
<script src="../dist/image-sequencer.js"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="header">
|
|
|
|
<h1>Image Sequencer</h1>
|
|
<h3>
|
|
<a href="https://github.com/publiclab/image-sequencer"><i class="fa fa-github"></i></a>
|
|
</h3>
|
|
|
|
</div>
|
|
|
|
<p style="display:none;" class="spinner"><i class="fa fa-spinner fa-spin"></i></p>
|
|
|
|
<div class="panels">
|
|
|
|
<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>
|
|
|
|
<div class="mod-new-panel" style="display:flex;justify-content:center">
|
|
<p class="lead" style="text-align:center">
|
|
Click on the image above to remove the FishEye Effect<br>
|
|
(This may take a few seconds)</p>
|
|
</div>
|
|
|
|
<!-- <div class="log">
|
|
<h4>var sequencer = new ImageSequencer();</h4><br>
|
|
<h4>sequencer.replaceImage('#pencils','invert');</h4>
|
|
</div> -->
|
|
|
|
<script>
|
|
|
|
var canvas = document.createElement('canvas');
|
|
var context = canvas.getContext('2d');
|
|
var image = document.querySelector('#grid');
|
|
var demoimage = document.querySelector('#demo');
|
|
var insrc;
|
|
demoimage.onload = function() {
|
|
canvas.width = image.width;
|
|
canvas.height = image.height;
|
|
context.drawImage(image,0,0);
|
|
insrc = canvas.toDataURL();
|
|
}
|
|
demoimage.src = image.src;
|
|
const text = document.querySelector(".lead").innerHTML;
|
|
|
|
var sequencer = ImageSequencer();
|
|
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 {
|
|
document.querySelector('#grid').src = "grid.png";
|
|
document.querySelector('#grid').className = "original";
|
|
document.querySelector(".lead").innerHTML = text;
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|