Lamellenbilder

aus ZUM-Wiki, dem Wiki für Lehr- und Lerninhalte auf ZUM.de
Wechseln zu: Navigation, Suche
Kurzinfo
GadApedia.jpg
Diese Seite gehört zur GadApedia.

Lamellenbilder im Unterricht

Zwei Bilder bild1.JPG und bild2.JPG, die gleich hoch sind und nach Möglichkeit auch gleich breit, werden in gleich breite vertikale Streifen zerschnitten und diese als neues Bild zusammengesetzt.


Wie macht man das mit dem Computer?

Ich habe längere Zeit gesucht, aber ausser einem relativ verwirrendem Python-Programm nichts anständiges gefunden. Daher habe ich es selbst in html5 programmiert. Kopieren Sie den Text des nächsten Abschnittes und speichern Sie ihn ab als textdatei. Ändern Sie die File-Extension um von .txt in .html dann entsteht daraus ein HTML-Dokument. Vergewissern Sie sich, dass Sie die Bilder bild1.JPG und bild2.JPG im gleichen Ordner haben wie die .html -Datei.


Das HTML-Programm als .txt

<!DOCTYPE html> <html> <body> So viele Lamellen pro Bildhälfte: <!--eigentlich ist die Anzahl der Lamellen = schnitte+1, aber ich will jetzt nicht überall schnitte durch Lamellen ersetzen. --> <input type="button" value="-1" onclick="schnitte_minus()"> <!--klickt man auf den Button, so wird die Funktion schnitte_plus() ausgelöst. --> <input type="text" id="dieschnitte" name="schnittes" size="1" style="text-align: center;" value="13"> <input type="button" value="+1" onclick="schnitte_plus()"> </p><p> <input type="button" value="Erzeuge das Lamellenbild" onclick="machlamellen()"> <p>bild1.jpg:</p> <img id="balk1" width="512" height="384" src="bild1.JPG" alt="erstes Bild"> <p>bild2.jpg:</p> <img id="balk2" width="512" height="384" src="bild2.JPG" alt="zweites Bild"> <p>Canvas:</p> <canvas id="meinCanvas" width="1024" height="384" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> function machlamellen() { var c = document.getElementById("meinCanvas"); var ctx = c.getContext("2d"); ctx.clearRect(0, 0, c.width, c.height); var img1 = document.getElementById("balk1"); var img2 = document.getElementById("balk2"); var schnittanzahl=parseInt(document.getElementById('dieschnitte').value); var br1=parseInt(img1.width/schnittanzahl); var br2=parseInt(img2.width/schnittanzahl); var brz=parseInt(1024/(2*schnittanzahl)); for(x=0;x<schnittanzahl;x++) { ctx.drawImage(img1, x*br1, 0, br1, img1.height, 2*x*brz, 0, brz, img1.height); ctx.drawImage(img2, x*br2, 0, br2, img2.height, 2*x*brz+brz, 0, brz, img2.height); } } function schnitte_plus() { schnitte = parseInt(document.getElementById('dieschnitte').value); if(schnitte < 999) schnitte += 1; document.getElementById('dieschnitte').value = String(schnitte); } function schnitte_minus() { schnitte = parseInt(document.getElementById('dieschnitte').value); if(schnitte > 2) schnitte -= 1; document.getElementById('dieschnitte').value = String(schnitte); } </script> </body> </html>