Afbeeldingen vergelijker
In de wat grotere grafische softwarepakketten kun je aanpassingen aan een foto vergelijken met het origineel. Je ziet het origineel aan de linkerkant en de aangepaste versie aan de rechterkant. Toen ik iets dergelijks zag in een webapplicatie, besloot ik het na te bouwen. Op deze pagina wordt het resultaat getoond.
De code van het voorbeeld kun je downloaden om zelf mee aan de slag te gaan, echter zonder de foto's. Daar moet je zelf voor zorgen.
- Er worden twee items besproken:
- De werking van het script.
- Inbouwen in je eigen site.
- Inspiratie voor dit item is ontstaan door grafische software en diverse websites die dit gebruiken. Voor deze site heb ik iets nagebouwd wat er op lijkt, gebaseerd op een programmeervoorbeeld op w3schools.com. Andere, vergelijkbare code heb ik op internet niet kunnen vinden, maar zal er ongetwijfeld zijn.
- De code bestaat uit HTML, CSS (in de file styles.css) en JavaScript (in de file script.js).
- Deze applicatie werkt niet alleen met een een muis of touchpad, maar ook met een aanraakscherm.
- De werking van het script
- We beginnen met een voorbeeld. Je ziet links de helft van een kleurenfoto en rechts de andere helft, die is omgezet in zwart-wit. Op de scheidingslijn in het midden staat een (blauwe) cirkel. Dat is een schuifknop die heen en weer kan worden bewogen. Op deze manier kan de kleurenfoto worden vergeleken met de zwart-wit versie.
- De "bewerkte" zwart-witfoto ligt in het document. De kleurenfoto ligt daar bovenop in een venster dat maar de helft van de foto laat zien. Met de schuifknop kant de rechterkant van het venster worden verplaatst zodat een groter of kleiner deel van het venster zichtbaar is.
- De foto zelf staat verkleind in het document. De foto van het voorbeeld meet 4000 × 3000 px. In het document is dat 400 × 300 px, dus 10 × verkleind. Voor de werking van het script maakt dat niet uit.
- Het meeste werk wordt gedaan door JavaScript: afvangen van de muispositie / de aanraking, wijzigen van het venster met de kleurenfoto en verplaatsen van de schuifknop.
- HTML
- De HTML van het voorbeeld bestaat uit twee delen:
• Een set geneste <div>-tags waar de foto's in komen. Deze staat op de plaats waar het effect moet verschijnen.
• Een <script>-tag, waarmee het effect wordt gestart. Deze staat aan het einde van de body, net voor de </body>-tag.
- De buitenste <div>-tag heeft de klasse wrapper. Deze bepaalt de afmetingen van het effect en positioneert het in de tekstregel.
- Binnen de wrapper staan twee <div>'s met klasse img-comp-img. Deze bevatten elk een van de foto's. De foto's zijn gewone <img>-tags binnen de klasse img-comp-img.
- De cirkel (de schuifknop ) wordt door JavaScript gemaakt. Dit element heeft de klasse img-comp-slider.
- CSS
- De klasse wrapper bepaalt de ruimte die het effect inneemt het document. In het voorbeeld is dat width ×
height = 400 × 300 px. Deze afmetingen worden bepaald door de afmetingen van de foto. Link en rechts van de wrapper
is wat extra ruimte nodig omdat de schuifknop gedeeltelijk buiten de foto kan komen.
De klasse wrapper is relatief gepositioneerd, ander werkt de uitlijning (hier: gecentreerd met margin:0 auto) niet altijd goed. Om links of rechts uit te lijnen gebruik je left:0 resp. right:0. - Zowel de kleurenfoto (het "origineel") als de zwart-witfoto (de "bewerkte" versie) zijn absoluut gepositioneerd binnen de wrapper, in de linker bovenhoek. Door width en height allebei op auto te zetten, nemen ze de volledige ruimte van de wrapper in.
- De beide foto's binnen img-comp-img worden altijd getoond door display:block. Afwijkingen in de beeldverhouding (voor de kleurenfoto) worden opgevangen door overflow:hidden.
- vertical-align staat op middle. Het (verticale) midden van de foto staat daardoor halverwege de wrapper.
- De klasse img-comp-slider maakt de schuifknop op. Het is een enigszins doorzichtige lichtblauwe cirkel met een
diameter van 40px. Om te zorgen dat de knop niet onder de foto's verdwijnt, is z-index:9 gebruikt. De muis-cursor is
aangepast met behulp van cursor:ew-resize, het is nu een horizontale dubbele pijl.
- JavaScript
- Het JavaScript bestaat uit één enkele function: initVergelijken(). Alle (hulp)functies en berekeningen bevinden zich binnen initVergelijken(), zodat er geen conflicten met andere JavaScripts zullen ontstaan.
- Als eerste worden de variabelen x en i gedeclareerd. x bevat een array met verwijzingen naar elementen
met de klasse img-comp-overlay. i is een loopteller die wordt gebruikt bij het aanroepen van de function compareImages().
Deze functie wordt aangeroepen voor elk element met de klasse img-comp-overlay. In het voorbeeld gebeurt dit éémaal,
nl. voor de kleurenfoto.
- De function compareImages(img) declareert vier variabelen: slider (wordt gebruikt bij het maken van de schuifknop), clicked (== 0 als de schuifknop niet wordt bewogen, == 1 als dat wel het geval is), w en h (bevatten de zichtbare breedte en hoogte van de foto, in px). De parameter img bevat een element uit de array x, dus een verwijzing naar een element met klasse img-comp-overlay.
- Vervolgens wordt de schuifknop gemaakt en op de halve hoogte en op de scheidinglijn tussen de twee foto's gezet. Daarna
worden event-listeners gemaakt voor het aanklikken en loslaten van de schuifknop met de muis, alsmede voor het aanraken en
loslaten van de schuifknop op een aanraakscherm. Deze listeners starten de function slideReady resp. slideFinish
als de muisknop wordt aangeklikt of aangeraakt, resp. als wordt losgelaten.
- De function slideReady() schakelt alle events uit die zouden kunnen optreden, om zij-effecten te voorkomen. Vervolgens
wordt clicked op 1 gezet en worden er event-listeners gemaakt voor het bewegen van de schuifknop. Deze roepen
de function slideMove aan.
- De function slideMove(e) declareert de variabele pos. Hierin wordt de horizontale positie van de schuifknop opgeslagen. De parameter e is een binnen JavaScript standaard beschikbare verwijzing naar het object MouseEvent, dat gegevens bevat over de laatste muis-klik.
- Als clicked gelijk is aan 0 hoeft de function niet (meer) te worden uitgevoerd en wordt deze verlaten met false, waardoor wordt aangegeven dat er niets verandert.
- Daarna wordt de cursorpositie vastgelegd in pos door getCursorPos(e). Direct daarna wordt gekeken of de
schuifknop niet buiten de foto zal komen. Zo nodig wordt gecorrigeerd en wordt de schuifknop verplaatst.
De variabele w die hier wordt gebruikt is gedeclareerd binnen compareImages(), evenals de function slideMove(), waardoor w geldig is binnen slideMove().
Tenslotte wordt de viewport aangepast aan de nieuwe stand van de schuifknop door slide(pos).
- De function getCursorPos(e) bepaalt de plaats van de cursor ten opzichte van de foto. Twee variabelen worden gedeclareerd: a, waarin een verwijzing naar de linker bovenhoek van de foto wordt opgeslagen en x, waarin de berekende (horizontale) positie van de cursor wordt opgeslagen. getCursorPos(e) retourneert x.
- Er wordt rekening gehouden met een eventueel aanraakscherm: als dat er is wordt de parameter e vervangen door e.changedTouches[0], waarin zich de aanraak-equivalent van een muisbeweging bevindt.
- Vervolgens wordt de x-coördinaat van de cursor bepaald ten opzichte van de foto. Hierbij wordt ook rekening gehouden
met horizontaal scrollen.
- De laatste function is slide(x). Deze past de breedte van de overlay (= de kleurenfoto) aan en zet de schuifknop
op zijn plaats.
- Inbouwen in je eigen site
- Regel twee even grote foto's van voldoende resolutie. In het voorbeeld zijn de foto 4000 × 3000 px, die met 400 × 300 px in het document worden getoond.
- Download de .zip-file en pak hem uit. Hernoem eventueel de file html840a.htm naar index.html of iets dergelijks. Zet bestandsnaam van de foto in de HTML. Je hebt nu een werkend voorbeeld.
- Pas, waar nodig en nuttig, kleuren, afmetingen en andere opmaak aan voor je eigen doeleinden. Houd de afmetingen van
de foto's in het document in verhouding tot de werkelijke afmetingen van de foto zelf om beeldvervorming te voorkomen. De
diameter van de schuifknop kun je veranderen, maar zou wel een cirkel moeten blijven.
- Tenslotte...
- In het voorbeeld is de "bewerkte" foto opgenomen in de website. In de praktijk wordt de bewerkte foto gemaakt door een webapplicatie of door een extern programma.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
(Zet dit in de <BODY> op de plaats waar het effect moet verschijnen)
<div class="wrapper">
<div class="img-comp-img">
<img src="foto-bewerkt.jpg" width="400" height="300">
</div>
<div class="img-comp-img img-comp-overlay">
<img src="foto-origineel.jpg" width="400" height="300">
</div>
</div> <!-- wrapper -->
(Zet dit helemaal aan het einde van de <BODY>)
<script>
initVergelijken();
</script>
Downloaden:
Druk op de knop:
File: voorb840.zip, 2833 bytes.
