Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F93075273
edit.html
No One
Temporary
Actions
Download File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Subscribers
None
File Metadata
Details
File Info
Storage
Attached
Created
Tue, Nov 26, 00:41
Size
7 KB
Mime Type
text/html
Expires
Thu, Nov 28, 00:41 (2 d)
Engine
blob
Format
Raw Data
Handle
22547163
Attached To
rDESUTOPLATFORM Desuto Platform
edit.html
View Options
<!--
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> 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
Log In to Comment