mirror of
https://github.com/mosbth/cimage.git
synced 2025-04-21 17:31:58 +02:00
Adding testcase for issue #117
This commit is contained in:
Mikael Roos
parent
f721ef4b35
commit
9620c1eb75
@ -29,7 +29,12 @@ input[type=text] {
|
||||
.area {
|
||||
float: left;
|
||||
padding: 1em;
|
||||
background-color: #fff;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.invert {
|
||||
background-color: #666;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.json {
|
||||
@ -45,7 +50,7 @@ input[type=text] {
|
||||
|
||||
<body>
|
||||
<h1>Compare images</h1>
|
||||
<p>Add link to images and visually compare them. Change the link och press return to load the image. <a href="http://dbwebb.se/opensource/cimage">Read more...</a></p>
|
||||
<p>Add link to images and visually compare them. Change the link och press return to load the image. Add <code>&black</code> to the querystring to get a black background. <a href="http://dbwebb.se/opensource/cimage">Read more...</a></p>
|
||||
|
||||
<p><a id="permalink" href="?">Direct link to this setup.</a></p>
|
||||
|
||||
@ -55,8 +60,11 @@ input[type=text] {
|
||||
<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>Image 5: <input type="text" id="input5" data-id="5"></label> <img id="thumb5"></br>
|
||||
<label>Image 6: <input type="text" id="input6" data-id="6"></label> <img id="thumb6"></br>
|
||||
<label><input type="checkbox" id="viewDetails">Show image details</label><br/>
|
||||
<label><input type="checkbox" id="stack">Stack images?</label>
|
||||
<label><input type="checkbox" id="stack">Stack images?</label><br/>
|
||||
<label><input type="checkbox" id="bg">Dark background?</label>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
@ -65,6 +73,8 @@ input[type=text] {
|
||||
<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>
|
||||
<button id="button5" class="button" data-id="5">Image 5</button>
|
||||
<button id="button6" class="button" data-id="6">Image 6</button>
|
||||
</div>
|
||||
|
||||
<div id="wrap">
|
||||
@ -93,6 +103,18 @@ input[type=text] {
|
||||
<pre id="json4" class="json hidden"></pre>
|
||||
</div>
|
||||
|
||||
<div id="area5" class="area">
|
||||
<code>Image 5</code><br>
|
||||
<img id="img5">
|
||||
<pre id="json5" class="json hidden"></pre>
|
||||
</div>
|
||||
|
||||
<div id="area6" class="area">
|
||||
<code>Image 6</code><br>
|
||||
<img id="img6">
|
||||
<pre id="json6" class="json hidden"></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -110,8 +132,11 @@ if (isset($_GET['input1'])) {
|
||||
"input2": "<?=$_GET['input2']?>",
|
||||
"input3": "<?=$_GET['input3']?>",
|
||||
"input4": "<?=$_GET['input4']?>",
|
||||
"input5": "<?=$_GET['input5']?>",
|
||||
"input6": "<?=$_GET['input6']?>",
|
||||
"json": <?=$_GET['json']?>,
|
||||
"stack": <?=$_GET['stack']?>
|
||||
"stack": <?=$_GET['stack']?>,
|
||||
"bg": <?=$_GET['bg']?>
|
||||
});
|
||||
<?php
|
||||
} elseif (isset($script)) {
|
||||
|
||||
16
webroot/compare/issue117-PNG24.php
Normal file
16
webroot/compare/issue117-PNG24.php
Normal file
@ -0,0 +1,16 @@
|
||||
<?php
|
||||
$script = <<<EOD
|
||||
CImage.compare({
|
||||
"input1": "../img.php?src=issue117/tri_original.png",
|
||||
"input2": "../img.php?src=issue117/tri_imageresizing.png",
|
||||
"input3": "../img.php?src=issue117/tri_cimage.png",
|
||||
"input4": "../img.php?src=issue117/tri_imagemagick.png",
|
||||
"input5": "../img.php?src=issue117/tri_original.png&w=190",
|
||||
"input6": "../img.php?src=issue117/tri_original.png&w=190&no-resample",
|
||||
"json": true,
|
||||
"stack": false,
|
||||
"bg": true
|
||||
});
|
||||
EOD;
|
||||
|
||||
include __DIR__ . "/compare.php";
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
webroot/img/issue117/tri_cimage.png
Normal file
BIN
webroot/img/issue117/tri_cimage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
webroot/img/issue117/tri_imagemagick.png
Normal file
BIN
webroot/img/issue117/tri_imagemagick.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
webroot/img/issue117/tri_imageresizing.png
Normal file
BIN
webroot/img/issue117/tri_imageresizing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
webroot/img/issue117/tri_original.png
Normal file
BIN
webroot/img/issue117/tri_original.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
@ -25,8 +25,11 @@ window.CImage = (function() {
|
||||
input2 = document.getElementById("input2"),
|
||||
input3 = document.getElementById("input3"),
|
||||
input4 = document.getElementById("input4"),
|
||||
input5 = document.getElementById("input5"),
|
||||
input6 = document.getElementById("input6"),
|
||||
details = document.getElementById("viewDetails"),
|
||||
stack = document.getElementById("stack"),
|
||||
bg = document.getElementById("bg"),
|
||||
permalink = document.getElementById("permalink");
|
||||
|
||||
link = "?";
|
||||
@ -34,8 +37,11 @@ window.CImage = (function() {
|
||||
link += "input2=" + encodeURIComponent(input2.value) + "&";
|
||||
link += "input3=" + encodeURIComponent(input3.value) + "&";
|
||||
link += "input4=" + encodeURIComponent(input4.value) + "&";
|
||||
link += "input5=" + encodeURIComponent(input5.value) + "&";
|
||||
link += "input6=" + encodeURIComponent(input6.value) + "&";
|
||||
link += "json=" + encodeURIComponent(details.checked) + "&";
|
||||
link += "stack=" + encodeURIComponent(stack.checked);
|
||||
link += "stack=" + encodeURIComponent(stack.checked) + "&";
|
||||
link += "bg=" + encodeURIComponent(bg.checked);
|
||||
permalink.href = link;
|
||||
}
|
||||
|
||||
@ -69,7 +75,7 @@ window.CImage = (function() {
|
||||
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;
|
||||
json.innerHTML = "filename: " + data.filename + "\ncolors: " + data.colors + "\nsize: " + data.size + "\nwidth: " + data.width + "\nheigh: " + data.height + "\naspect-ratio: " + data.aspectRatio + "\npng-type: " + data.pngType;
|
||||
})
|
||||
.fail(function() {
|
||||
json.innerHTML = "Details not available."
|
||||
@ -95,14 +101,19 @@ window.CImage = (function() {
|
||||
input2 = document.getElementById("input2"),
|
||||
input3 = document.getElementById("input3"),
|
||||
input4 = document.getElementById("input4"),
|
||||
input5 = document.getElementById("input5"),
|
||||
input6 = document.getElementById("input6"),
|
||||
details = document.getElementById("viewDetails"),
|
||||
stack = document.getElementById("stack"),
|
||||
bg = document.getElementById("bg"),
|
||||
buttons = document.getElementById("buttonWrap");
|
||||
|
||||
input1.addEventListener("change", compareLoadImage);
|
||||
input2.addEventListener("change", compareLoadImage);
|
||||
input3.addEventListener("change", compareLoadImage);
|
||||
input4.addEventListener("change", compareLoadImage);
|
||||
input5.addEventListener("change", compareLoadImage);
|
||||
input6.addEventListener("change", compareLoadImage);
|
||||
|
||||
// Toggle json
|
||||
details.addEventListener("change", function() {
|
||||
@ -129,6 +140,23 @@ window.CImage = (function() {
|
||||
details.dispatchEvent(myEvent);
|
||||
}
|
||||
|
||||
// Toggle background color
|
||||
bg.addEventListener("change", function() {
|
||||
var elements = document.querySelectorAll(".area");
|
||||
|
||||
forEach(elements, function (index, element) {
|
||||
element.classList.toggle("invert");
|
||||
});
|
||||
});
|
||||
|
||||
// Check background
|
||||
if (options.bg === true) {
|
||||
bg.setAttribute("checked", "checked");
|
||||
bg.classList.toggle("invert");
|
||||
myEvent = new CustomEvent("change");
|
||||
bg.dispatchEvent(myEvent);
|
||||
}
|
||||
|
||||
// Toggle stack
|
||||
stack.addEventListener("change", function() {
|
||||
var element,
|
||||
@ -200,11 +228,15 @@ window.CImage = (function() {
|
||||
input2.value = options.input2 || null;
|
||||
input3.value = options.input3 || null;
|
||||
input4.value = options.input4 || null;
|
||||
input5.value = options.input5 || null;
|
||||
input6.value = options.input6 || null;
|
||||
|
||||
compareLoadImage.call(input1);
|
||||
compareLoadImage.call(input2);
|
||||
compareLoadImage.call(input3);
|
||||
compareLoadImage.call(input4);
|
||||
compareLoadImage.call(input5);
|
||||
compareLoadImage.call(input6);
|
||||
|
||||
console.log(options);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user