PHP - Hinzufügen von Wasserzeichen beim hochladen eines Bildes

[Bildschirmfoto]
Hinzufügen von Wasserzeichen beim hochladen eines Bildes.

Ein Wasserzeichen ist die beste Option, um das Bild vor Diebstahl oder der Wiederverwendung durch eine andere Person zu schützen. Sie können den Besitz anzeigen, indem Sie dem Bild Wasserzeichen hinzufügen. Das Wasserzeichen hilft, den Ersteller zu identifizieren.

Meistens wird der Wasserzeichenstempel in den urheberrechtlich geschützten Bildern verwendet. Im Allgemeinen wird das Firmenlogo oder der Name des Erstellers als Wasserzeichen zu Bildern hinzugefügt.

✔ Mein Beispielskript hilft Ihnen, Bilder mit Wasserzeichen hochzuladen und mit PHP auf dem Server zu speichern. Sie können das Wasserzeichen automatisch mit PHP zu hochgeladenen Bildern hinzufügen.

Quelltext: wasserzeichen.php Ausblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘ ◑

<?php

/*

 * Hinzufügen von Wasserzeichen beim hochladen eines Bildes

 */





// Verzeichnis der hochgeladenen Bilder

$uploadFolder = "bilder/";



// Maximale Dateigröße in Bytes

// 1048576 Bytes = 1 MB

$maxFilesize = 5242880; // 5242880 Bytes = 5 MB



// Abmessungen der Bilddatei in Pixel

$maxWidth = 1500; // Maximale Breite

$maxHeight = 1500; // Maximale Höhe



// Angabe der Mimetypen (nur Bilddateien)

$mimeType = [

  "jpg" => "image/jpeg",

  "jpeg" => "image/jpeg",

  "png" => "image/png",

  "gif" => "image/gif",

  "webp" => "image/webp"

];



// Maximale Länge des Dateinamens

$maxFilename = 65; // 65



// Pfad zum Wasserzeichen-Bild (muss vom Typ: .PNG sein!)

$watermarkPath = "watermark.png";



// Position des Wasserzeichen

// 1 = links oben, 2 = rechts oben, 3 = links unten,

// 4 = rechts unten, 5 = mitte

// 0 = Andere Position, siehe Abschnitt: // Position manuell setzen

$watermarkPos = 4; // 4



// Wasserzeichen-Tranzparenz: 0 - 100 (0 = keine Transp.)

$watermarkTransp = 35; // 35



// Ausgabe

$output = '';



// Daten wurden über das Formular gesendet

if ($_SERVER["REQUEST_METHOD"] == "POST") {



  // Temporäre Datei wurde hochgeladen

  if (is_uploaded_file($_FILES["file"]["tmp_name"])) {



    // Info über die Datei holen

    list($tmpWidth, $tmpHeight, $tmpType) = getImageSize($_FILES["file"]["tmp_name"]);

    $path = pathinfo($_FILES["file"]["name"]);

    $extension = strtolower($path["extension"]);

    $filename = $path["filename"];

    // $filename = "image_"; // Bsp. für einheitliche Dateinamen



    // Nur Bilddateien durchlassen

    if (

      $tmpWidth > 0 &&

      $tmpHeight > 0 &&

      in_array($_FILES["file"]["type"], $mimeType) &&

      in_array($extension, array_keys($mimeType))

    ) {



      // Dateigröße überprüfen

      if ($_FILES["file"]["size"] <= $maxFilesize) {



        // Abmessungen überprüfen

        if (

          $tmpWidth <= $maxWidth &&

          $tmpHeight <= $maxHeight

        ) {



          // Dateiname filtern

          $filename = iconv("ISO-8859-1", "UTF-8", $filename); // UTF-8 decodiert

          $filename = trim($filename); // Whitespace

          $filename = mb_strtolower($filename); // Kleinbuchstaben



          // Hier entsprechende Zeichen und Ersatzzeichen (vom ASCII-Zeichensatz) einfügen

          $filename = str_replace(["ä", "ö", "ü", "ß", " ",], ["ae", "oe", "ue", "ss", "_",], $filename);



          // Angegebene Zeichen durchlassen, alle sonstigen filtern

          $filename = preg_replace("/[^a-z0-9_-]/", "", $filename);



          // Länge des Dateinamens eventuell kürzen

          $newname = substr($filename, 0, $maxFilename) . "." . $extension;



          // Wenn die Datei vorhanden ist, hänge eine Zahl an den Dateinamen

          // Beispiel: bild_002.jpg, bild_003.jpg, bild_004.jpg ...

          if (file_exists($uploadFolder . $newname)) {

            $nr = 2; // Startzahl

            do {

              $newname = substr($filename, 0, $maxFilename)  . '_' .  str_pad($nr, 3, "0", STR_PAD_LEFT) . "." . $extension;

              $nr++;

            } while (file_exists($uploadFolder . $newname));

          }



          // Wasserzeichen hinzufügen

          watermark($_FILES["file"]["tmp_name"], $extension, $watermarkPath, $watermarkPos, $watermarkTransp);



          // Datei auf den Server hochladen

          if (move_uploaded_file($_FILES["file"]["tmp_name"], $uploadFolder . $newname)) {

            $output = '<p>Die Datei: &bdquo;' . $newname . '&rdquo; wurde hochgeladen.</p>';

          } else {

            $output = '<p>Fehler beim hochladen!</p>';

          }

        } else {

          $output = '<p>Die Abmessungen des Bildes: ' . $tmpWidth . 'px * ' . $tmpHeight . 'px sind zu groß!</p>';

        }

      } else {

        $output = '<p>Das Bild ist zu groß (max: ' . $maxFilesize . ' Bytes)!</p>';

      }

    } else {

      $output = '<p>Bitte nur Bilddateien hochladen!</p>';

    }

  }

}



// Wasserzeichen

function watermark($targetFilePath, $extension, $watermarkPath, $watermarkPos, $watermarkTransp) {



  // Erzeugt ein neues Bild aus einer Datei (je nach Dateityp)

  switch ($extension) {

    case 'jpg':

      $img = imageCreateFromJPEG($targetFilePath);

      break;

    case 'jpeg':

      $img = imageCreateFromJPEG($targetFilePath);

      break;

    case 'png':

      $img = imageCreateFromPNG($targetFilePath);

      break;

    case 'gif':

      $img = imageCreateFromGIF($targetFilePath);

      break;

    case 'webp':

      $img = imageCreateFromWEBP($targetFilePath);

      break;

    default:

      $img = imageCreateFromJPEG($targetFilePath);

  }



  // Breite und Höhe des Bildes

  $imgW = imagesX($img);

  $imgH = imagesY($img);



  // Erzeugt ein neues Wasserzeichen-Bild aus einer Datei

  $watermarkImg = imageCreateFromPNG($watermarkPath);



  // Festlegen des Mischmodus für das Bild

  imageAlphaBlending($watermarkImg, false);



  // Alphakanal-Information erhalten

  imageSaveAlpha($watermarkImg, true);



  // Breite und Höhe des Wasserzeichens

  $wmW = imagesX($watermarkImg);

  $wmH = imagesY($watermarkImg);



  // Position des Wasserzeichen

  $margin = 10; // Pixel Abstand vom Bildrand



  switch ($watermarkPos) {

    case 1: // links oben

      $wmX = $margin;

      $wmY = $margin;

      break;

    case 2: // rechts oben

      $wmX = $imgW - $wmW - $margin;

      $wmY = $margin;

      break;

    case 3: // links unten

      $wmX = $margin;

      $wmY = $imgH - $wmH - $margin;

      break;

    case 4: // rechts unten

      $wmX = $imgW - $wmW - $margin;

      $wmY = $imgH - $wmH - $margin;

      break;

    case 5: // mitte

      $wmX = round($imgW / 2) - round($wmW / 2);

      $wmY = round($imgH / 2) - round($wmH / 2);

      break;

    default: // Position manuell setzen

      $wmX = 150; // Position von links

      $wmY = 250; // Position von oben

  }



  // Kopiere das Wasserzeichen mit der Tranzparenz und der Position ins Bild

  imageCopyMerge($img, $watermarkImg, $wmX, $wmY, 0, 0, $wmW, $wmH, $watermarkTransp);



  // Bild speichern und den Grafikspeicher löschen

  imagePNG($img, $targetFilePath);

  imageDestroy($img);

}

?>

<!DOCTYPE html>

<html lang="de">



<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Hinzufügen von Wasserzeichen</title>



  <style>

    body {

      font-family: Arial, Tahoma, Sans-Serif;

      margin: 25px;

    }



    p {

      width: 430px;

      padding: 10px;

      background-color: Whitesmoke;

      box-shadow: 0px 0px 4px 1px Gainsboro;

    }

  </style>



</head>



<body>



  <form method="post" enctype="multipart/form-data">



    <p>

      <label>Bild:

        <input type="file" name="file" id="file" accept="image/*" data-size-max="<?= $maxFilesize; ?>" required="required"></label><br>

      <small>Dateiformate: <?= implode(", ", array_unique(array_keys($mimeType))); ?> -

        Max. Dateigröße: <?= number_format(($maxFilesize / 1024 / 1024), 1, ",", "."); ?> MB<br>

        Max. Abmessungen: <?= $maxWidth . ' x ' . $maxHeight; ?> Pixel</small>

    </p>



    <p>

      <button type="submit">Absenden</button>

    </p>



  </form>



  <?= $output; ?>



  <script>

    document.getElementById("file").addEventListener('change', (e) => {

      FileList.prototype.every = Array.prototype.every;

      var element = e.target;

      if (!element.matches('input[type="file"][data-size-max]')) {

        return;

      }

      var sizeMax = parseInt(element.dataset.sizeMax);

      var valid = element.files.every(function(file) {

        return file.size < sizeMax;

      });



      if (!valid) {

        element.setCustomValidity(`Datei darf maximal ${sizeMax} Byte gross sein!`);

      }

    });

  </script>



</body>



</html>

Tipps

Vorschaubilder (Thumbnails) erstellen

Bilder mit Wasserzeichen markieren

Bilder in den Browser laden per File API

Bilder in einer Datenbank-Tabelle speichern und ausgeben

Bausteine Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<dd> Definitionsliste

CSS - Blinkende Inhalte mit Keyframes

PHP - Wochen automatisch generieren

JavaScript - Optionen in der Auswahlliste je nach Alter der Person anzeigen

MySQL - Benutzer nach 1 Stunde zurücksetzen

Gesamter Inhalt zentriert
Vor allem Anfänger machen oft den Fehler die gesamte Webseite "auf die Mittelachse zu schrauben". Zentrierten Text sollte man verwenden, wenn man etwas hervorheben möchte, für längere Textpassagen ist er denkbar ungeeignet, weil er sehr schlecht lesbar ist. Eine Seite, auf der alles zentriert ist, macht einen unprofessionellen Eindruck.