mirror of
https://github.com/mosbth/cimage.git
synced 2025-08-01 14:00:08 +02:00
Adding compare-page for comparing images. Issue #20.
This commit is contained in:
Mikael Roos
13
webroot/compare/compare-test.php
Normal file
13
webroot/compare/compare-test.php
Normal file
@@ -0,0 +1,13 @@
|
||||
<?php
|
||||
$script = <<<EOD
|
||||
CImage.compare({
|
||||
"input1": "../img.php?src=car.png",
|
||||
"input2": "../img.php?src=car.png&sharpen",
|
||||
"input3": "../img.php?src=car.png&blur",
|
||||
"input4": "../img.php?src=car.png&emboss",
|
||||
"json": true,
|
||||
"stack": false
|
||||
});
|
||||
EOD;
|
||||
|
||||
include __DIR__ . "/compare.php";
|
||||
106
webroot/compare/compare.php
Normal file
106
webroot/compare/compare.php
Normal file
@@ -0,0 +1,106 @@
|
||||
<!doctype html>
|
||||
<html lang=en>
|
||||
<head>
|
||||
<style>
|
||||
|
||||
body {
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#wrap {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
|
||||
}
|
||||
|
||||
.stack {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.area {
|
||||
float: left;
|
||||
padding: 1em;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.top {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Compare images</h1>
|
||||
<p>Add link to images and visually compare them. Change the link och press return to load the image.</p>
|
||||
|
||||
<form>
|
||||
<p>
|
||||
<label>Image 1: <input type="text" id="input1" data-id="1"></label> <img id="thumb1"></br>
|
||||
<label>Image 2: <input type="text" id="input2" data-id="2"></label> <img id="thumb2"></br>
|
||||
<label>Image 3: <input type="text" id="input3" data-id="3"></label> <img id="thumb3"></br>
|
||||
<label>Image 4: <input type="text" id="input4" data-id="4"></label> <img id="thumb4"></br>
|
||||
<label><input type="checkbox" id="viewDetails">Hide image details?</label><br/>
|
||||
<label><input type="checkbox" id="stack">Stack images?</label>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<div id="buttonWrap" class="hidden">
|
||||
<button id="button1" class="button" data-id="1">Image 1</button>
|
||||
<button id="button2" class="button" data-id="2">Image 2</button>
|
||||
<button id="button3" class="button" data-id="3">Image 3</button>
|
||||
<button id="button4" class="button" data-id="4">Image 4</button>
|
||||
</div>
|
||||
|
||||
<div id="wrap">
|
||||
|
||||
<div id="area1" class="area">
|
||||
<code>Image 1</code><br>
|
||||
<img id="img1">
|
||||
<pre id="json1" class="json"></pre>
|
||||
</div>
|
||||
|
||||
<div id="area2" class="area">
|
||||
<code>Image 2</code><br>
|
||||
<img id="img2">
|
||||
<pre id="json2" class="json"></pre>
|
||||
</div>
|
||||
|
||||
<div id="area3" class="area">
|
||||
<code>Image 3</code><br>
|
||||
<img id="img3">
|
||||
<pre id="json3" class="json"></pre>
|
||||
</div>
|
||||
|
||||
<div id="area4" class="area">
|
||||
<code>Image 4</code><br>
|
||||
<img id="img4">
|
||||
<pre id="json4" class="json"></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
|
||||
<script src="../js/cimage.js"></script>
|
||||
<script>
|
||||
<?php
|
||||
if (isset($script)) {
|
||||
echo $script;
|
||||
} else {
|
||||
echo "CImage.compare({});";
|
||||
} ?>
|
||||
</script>
|
||||
|
||||
</html>
|
||||
163
webroot/js/cimage.js
Normal file
163
webroot/js/cimage.js
Normal file
@@ -0,0 +1,163 @@
|
||||
/**
|
||||
* JavaScript utilities for CImage and img.php.
|
||||
*/
|
||||
window.CImage = (function(){
|
||||
"use strict";
|
||||
|
||||
|
||||
/**
|
||||
* Init the compare page with details.
|
||||
*/
|
||||
function compareLoadImage(event) {
|
||||
var img, json, button, area, deck, id;
|
||||
|
||||
id = this.dataset.id;
|
||||
img = document.getElementById("img" + id);
|
||||
json = document.getElementById("json" + id);
|
||||
button = document.getElementById("button" + id);
|
||||
area = document.getElementById("area" + id);
|
||||
deck = document.getElementById("deck" + id);
|
||||
|
||||
if (this.value == "") {
|
||||
// Clear image if input is cleared
|
||||
button.setAttribute("disabled", "disabled");
|
||||
area.classList.add("hidden");
|
||||
button.classList.remove("selected");
|
||||
return;
|
||||
}
|
||||
|
||||
// Display image in its area
|
||||
img.src = this.value;
|
||||
area.classList.remove("hidden");
|
||||
|
||||
$.getJSON(this.value + "&json", function(data) {
|
||||
json.innerHTML = "filename: " + data.filename + "\ncolors: " + data.colors + "\nsize: " + data.size + "\nwidth: " + data.width + "\nheigh: " + data.height + "\naspect-ratio: " + data.aspectRatio;
|
||||
});
|
||||
|
||||
// Display image in overlay
|
||||
button.removeAttribute("disabled");
|
||||
button.classList.add("selected");
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Init the compare page with details.
|
||||
*/
|
||||
function compareInit(options)
|
||||
{
|
||||
var elements, id, onTop, myEvent,
|
||||
input1 = document.getElementById("input1"),
|
||||
input2 = document.getElementById("input2"),
|
||||
input3 = document.getElementById("input3"),
|
||||
input4 = document.getElementById("input4"),
|
||||
details = document.getElementById("viewDetails"),
|
||||
stack = document.getElementById("stack"),
|
||||
buttons = document.getElementById("buttonWrap");
|
||||
|
||||
/* img1 = document.getElementById("img1"),
|
||||
img2 = document.getElementById("img2"),
|
||||
img3 = document.getElementById("img3"),
|
||||
img4 = document.getElementById("img4"),
|
||||
img01 = document.getElementById("img01"),
|
||||
img02 = document.getElementById("img02"),
|
||||
img03 = document.getElementById("img03"),
|
||||
img04 = document.getElementById("img04"),
|
||||
json1 = document.getElementById("json1"),
|
||||
json2 = document.getElementById("json2"),
|
||||
json3 = document.getElementById("json3"),
|
||||
json4 = document.getElementById("json4"),
|
||||
json01 = document.getElementById("json01"),
|
||||
json02 = document.getElementById("json02"),
|
||||
json03 = document.getElementById("json03"),
|
||||
json04 = document.getElementById("json04"),
|
||||
button1 = document.getElementById("button1"),
|
||||
button2 = document.getElementById("button2"),
|
||||
button3 = document.getElementById("button3"),
|
||||
button4 = document.getElementById("button4"),
|
||||
area1 = document.getElementById("area1"),
|
||||
area2 = document.getElementById("area2"),
|
||||
area3 = document.getElementById("area3"),
|
||||
area4 = document.getElementById("area4");*/
|
||||
|
||||
input1.addEventListener("change", compareLoadImage);
|
||||
input2.addEventListener("change", compareLoadImage);
|
||||
input3.addEventListener("change", compareLoadImage);
|
||||
input4.addEventListener("change", compareLoadImage);
|
||||
|
||||
// Toggle json
|
||||
details.addEventListener("change", function() {
|
||||
var elements = document.querySelectorAll(".json");
|
||||
for (var element of elements) {
|
||||
element.classList.toggle("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
// Do not show json as default
|
||||
if (options.json === false) {
|
||||
details.setAttribute("checked", "checked");
|
||||
myEvent = new CustomEvent("change");
|
||||
details.dispatchEvent(myEvent);
|
||||
}
|
||||
|
||||
// Toggle stack
|
||||
stack.addEventListener("change", function() {
|
||||
var element,
|
||||
elements = document.querySelectorAll(".area");
|
||||
|
||||
buttons.classList.toggle("hidden");
|
||||
|
||||
for (element of elements) {
|
||||
element.classList.toggle("stack");
|
||||
|
||||
if (!element.classList.contains('hidden')) {
|
||||
onTop = element;
|
||||
}
|
||||
}
|
||||
onTop.classList.toggle("top");
|
||||
|
||||
console.log("Stacking");
|
||||
});
|
||||
|
||||
// Stack as default
|
||||
if (options.stack === true) {
|
||||
stack.setAttribute("checked", "checked");
|
||||
myEvent = new CustomEvent("change");
|
||||
stack.dispatchEvent(myEvent);
|
||||
}
|
||||
|
||||
// Button clicks
|
||||
elements = document.querySelectorAll(".button");
|
||||
for (var element of elements) {
|
||||
element.addEventListener("click", function() {
|
||||
var id = this.dataset.id,
|
||||
area = document.getElementById("area" + id);
|
||||
|
||||
area.classList.toggle("top");
|
||||
onTop.classList.toggle("top");
|
||||
onTop = area;
|
||||
console.log("button" + id);
|
||||
});
|
||||
}
|
||||
|
||||
input1.value = options.input1 || null;
|
||||
input2.value = options.input2 || null;
|
||||
input3.value = options.input3 || null;
|
||||
input4.value = options.input4 || null;
|
||||
|
||||
compareLoadImage.call(input1);
|
||||
compareLoadImage.call(input2);
|
||||
compareLoadImage.call(input3);
|
||||
compareLoadImage.call(input4);
|
||||
|
||||
console.log(options);
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
"compare": compareInit
|
||||
};
|
||||
|
||||
}());
|
||||
Reference in New Issue
Block a user