Page MenuHomec4science

edit.html
No OneTemporary

File Metadata

Created
Tue, Nov 26, 00:41

edit.html

<!--
Page to edit an image
-->
<!DOCTYPE html>
<html>
<head>
<base href="/retrieval/">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/edit-sober.css"/>
<link rel="stylesheet" href="css/caman.css"/>
<link href='//fonts.googleapis.com/css?family=Rancho' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Configuration -->
<script src="js/config/config.js"></script>
<!-- jQuery (local) -->
<script src="js/vendor/jquery-1.10.2.min.js"></script>
<script src="js/vendor/jquery-libs/jquery.migrate-1.1.1.js"></script>
<script src="js/vendor/jquery-libs/jquery.imagemapster.js"></script>
<script src="js/vendor/underscore-min.js"></script>
<script src="js/vendor/caman.full.js"></script>
<script src="js/vendor/getImageData.js"></script>
<script src="js/edit/edit.js"></script>
<script>
//Actions to do when the page is loading
$(function() {
var imageID = getParameterByName("id");
imageID = imageID.substring(imageID.lastIndexOf("/") + 1, imageID.lastIndexOf("."));
//get article url (if available)
$.getJSON(config.getArticleForImageURL, {
"imageID": imageID,
"indexID": config.articlesLuceneIndexID,
}, function(data) {
if(Object.keys(data).length !== 0 && data.hasOwnProperty("url") && data.url !== ""){
var linkElement = $("<a><i class='fa fa-file-text-o'></i> &nbsp;Go To Article</a>").attr("href", data.url).attr("target", "_blank");
$("#gotoArticle").append(linkElement);
}
});
//get the value of the parameter id in the URL
var idImageDetail = getParameterByName("id");
updateCanvas();
// Set the source of the canvas image to the current URL
$('#example').attr({'src': idImageDetail});
addImageOnCanvas('example');
/* Required for importing images from another domain */
/*$.getImageData({url: idImageDetail,
success: function(image) {
$('#example').attr({'src': image.src});
addImageOnCanvas('example');
}
});*/
});
</script>
</head>
<body id="bodyEdition">
<!-- Div with the content -->
<div id="content">
<!-- Div with the image to edit -->
<div id="editionImage">
<div id="editionOverlay"><img src="img/loader-white-32.gif" /></div>
<img
id="example"
class="unselectable"
src="//placeholdit.imgix.net/~text?txtsize=33&txt=loading...&w=300&h=300"
>
<div id="gotoArticle"></div>
</div>
<!-- Div with all tools to edit the image -->
<div id="editionTools">
<div id="Filters">
<div class="Filter">
<div class="FilterName">
<p>brightness</p>
</div>
<div class="FilterSetting">
<input
type="range"
id="slider1"
min="-100"
max="100"
step="1"
value="0"
data-filter="brightness"
>
<span id="sliderCaption1" class="FilterValue">0</span>
</div>
</div>
<div class="Filter">
<div class="FilterName">
<p>contrast</p>
</div>
<div class="FilterSetting">
<input
type="range"
id="slider2"
min="-100"
max="100"
step="1"
value="0"
data-filter="contrast"
>
<span id="sliderCaption2" class="FilterValue">0</span>
</div>
</div>
<div class="Filter">
<div class="FilterName">
<p>saturation</p>
</div>
<div class="FilterSetting">
<input
type="range"
id="slider3"
min="-100"
max="100"
step="1"
value="0"
data-filter="saturation"
>
<span id="sliderCaption3" class="FilterValue">0</span>
</div>
</div>
<div class="Filter">
<div class="FilterName">
<p>vibrance</p>
</div>
<div class="FilterSetting">
<input
type="range"
id="slider4"
min="-100"
max="100"
step="1"
value="0"
data-filter="vibrance"
>
<span id="sliderCaption4" class="FilterValue">0</span>
</div>
</div>
<div class="Filter">
<div class="FilterName">
<p>exposure</p>
</div>
<div class="FilterSetting">
<input
type="range"
id="slider5"
min="-100"
max="100"
step="1"
value="0"
data-filter="exposure"
>
<span id="sliderCaption5" class="FilterValue">0</span>
</div>
</div>
</div>
<!-- A div with a reset button, to put all value to zero -->
<div id="resetButtonDiv">
<button onclick="reset();">Reset</button>
</div>
</div>
</div>
</body>
</html>

Event Timeline