imago-js
Version:
> It's a wonderful image library! With the purpose to facilitate the manipulation of images, imago.js enables you to perform trimming and resizing. [Example page](http://evandroeisinger.github.io/imago.js/example)
158 lines (135 loc) • 3.35 kB
HTML
<html>
<head>
<title>imago.js</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
article {
width: 100%;
max-width: 768px;
margin: 0 auto;
padding: 1rem 0;
}
h1 {
font-size: 2.5rem;
font-family: sans-serif;
}
figure {
margin: 0;
padding: 0;
}
img {
width: 100%;
height: auto;
}
button {
outline: none;
font-size: 1em;
border: black solid 1px;
border-radius: .25rem;
background: white;
cursor: pointer;
color: black;
margin-right: 0.5rem;
line-height: 1.5rem;
}
button:hover {
color: white;
background: black;
}
button:disabled {
opacity: .25;
cursor: no-drop;
}
.actions {
margin: 1em 0;
position: relative;
z-index: 999;
}
.crop__mask {
background: rgba(255, 255, 255, .75);
}
.crop__handlers span {
border: 4px solid white;
width: 12px;
height: 12px;
z-index: 50;
margin: 5px;
}
.crop__move-handler {
cursor: move;
}
.crop__handlers span.crop__top-left-handler {
border-right: 0;
border-bottom: 0;
cursor: nw-resize;
}
.crop__handlers span.crop__bottom-left-handler {
border-right: 0;
border-top: 0;
cursor: sw-resize;
}
.crop__handlers span.crop__top-right-handler {
border-left: 0;
border-bottom: 0;
cursor: ne-resize;
}
.crop__handlers span.crop__bottom-right-handler {
border-left: 0;
border-top: 0;
cursor: se-resize;
}
</style>
</head>
<body>
<article>
<h1>imago.js</h1>
<img id="image" src="../test/fixture.jpg" alt="Davide Gabino">
<div class="actions">
<button id="editButton" onclick="edit()">edit</button>
<button id="saveButton" onclick="save()" disabled="true">save</button>
<button id="undoButton" onclick="cancel()" disabled="true">cancel</button>
<button id="resetButton" onclick="reset()" disabled="true">reset</button>
</div>
</article>
<script type="text/javascript" src="../src/imago.js"></script>
<script type="text/javascript">
var editButton = document.getElementById('editButton'),
saveButton = document.getElementById('saveButton'),
undoButton = document.getElementById('undoButton'),
resetButton = document.getElementById('resetButton'),
image = new Imago(document.getElementById('image'));
function enableEdition() {
editButton.setAttribute('disabled', true);
saveButton.removeAttribute('disabled');
undoButton.removeAttribute('disabled');
resetButton.removeAttribute('disabled');
}
function disableEdition() {
editButton.removeAttribute('disabled');
saveButton.setAttribute('disabled', true);
undoButton.setAttribute('disabled', true);
resetButton.setAttribute('disabled', true);
}
function edit() {
enableEdition();
image.edit();
}
function save() {
disableEdition();
image.save();
}
function cancel() {
disableEdition();
image.cancel();
}
function reset() {
disableEdition();
image.reset();
}
</script>
</body>
</html>