Bild mit Javascript unten abschneiden

  • Hallo,


    das Foto einer Wettercam wird alle paar Minuten aktualisiert und angezeigt.

    Bildgröße im Original 1920px x 1080px, angezeigte Größe skaliert auf 592px x 333px.


    Im unteren Bereich des Bildes sollen nun aber aus Datenschutzgründen vor der Anzeige immer 200px abgeschnitten werden.

    Das automatische Abschneiden kann man doch bestimmt mit Javascript erledigen, oder?

    Aber wie?


    Danke im Voraus und Gruß,

    Schildus

  • Schnelle Lösung:

    Leg doch ein ein <div></div> um dein Bild herum ,

    Gibt den Container eine feste höhe , minus 200px,

    gib ihn overflow:hidden und fertig.


    Für Bilder bearbeiten und beschneiden mußt du mal warten bis die Leute sich melden die das schon gemacht haben.

    Mit Php ist das kein problem , mit JS habe ich mich da auch noch nicht auseinander gesetzt

  • Das ist sowohl mit HTML und CSS als auch mit Javascript und Canvas machbar. Allerdings ist es in beiden Fällen für einen technisch Versierten kein Problem, an das vollständige Bild heran zu kommen. Es geht aber auch mit PHP, dann würde das beschnittene Bild gar nicht an den Browser gelangen und die verdeckten Informationen wären sicher gegen Ausspionieren.

  • Im unteren Bereich des Bildes sollen nun aber aus Datenschutzgründen vor der Anzeige immer 200px abgeschnitten werden.

    Das automatische Abschneiden kann man doch bestimmt mit Javascript erledigen, oder?

    Wenn aus Datenschutzgründen unten immer 200px abgeschnitten werden müssen verbietet sich eine Javascript-Lösung von alleine: das Bild würde trotzdem vollständig zum Client übertragen und kann vollständig eingesehen werden (ich gehe mal davon aus dass du clientseitiges Javascript meinst). Du musst das Bild zwingend serverseitig bearbeiten und dann das beschnittene (und ggf. verkleinerte) Bild ausliefern - evtl. wäre es sinnvoll das Bild in bearbeiteter Form am Server zu speichern um die Schritte nicht bei jedem Seitenaufruf machen zu müssen.

  • Vielen Dank Sempervivum!

    Das war mit PHP wirklich schnell realisiert. :)


    <?php

    $im = imagecreatefromjpeg('2-wetter/upcam.jpg');

    $sizex = 1920;

    $sizey = 1000;

    $im2 = imagecrop($im, ['x' => 0, 'y' => 0, 'width' => $sizex, 'height' => $sizey]);

    if ($im2 !== FALSE) {

    imagejpeg($im2, '2-wetter/upcam-php.jpg');

    imagedestroy($im2);

    }

    imagedestroy($im);

    ?>