Wie kann ich dies auf einem Webserver in meinem lokalen Netzwerk bereitstellen?
Kannst du bitte eine einfache statische Website erstellen, in der Platz für 3 horizontale Bildplätze und 1 Schieberegler vorhanden ist, mit den folgenden Details:
1. Der linke Bildplatz und der rechte Bildplatz sind Eingaben - der Benutzer muss ein Bild hochladen können
2. Der mittlere Bildplatz ist eine Ausgabe und entspricht dem gewichteten Durchschnitt der Pixelwerte der beiden hochgeladenen Bilder (er bleibt leer, bis beide Bilder hochgeladen wurden)
3. Der Schieberegler befindet sich direkt unter dem mittleren Bildplatz und reicht von 0 bis 1. Er bestimmt das Gewicht des linken Bildes im Durchschnitt. Das Gewicht des rechten Bildes beträgt (1 - Schieberegler-Gewicht) <!DOCTYPE html>
<html>
  <head>
    <style>
      .image-slot {
        width: 33.33%;
        height: 300px;
        float: left;
        text-align: center;
        position: relative;
        border: 1px solid black;
      }
      .image-slot input[type="file"] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
      }
      .image-slot img {
        max-width: 100%;
        max-height: 100%;
      }
      .slider {
        clear: both;
        width: 100%;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div class="image-slot">
      <input type="file" id="left-image" onchange="uploadImage(this)">
      <label for="left-image">
        <img id="left-image-preview" src="">
      </label>
    </div>
    <div class="image-slot" id="middle-image-slot">
      <img id="middle-image" src="">
    </div>
    <div class="image-slot">
      <input type="file" id="right-image" onchange="uploadImage(this)">
      <label for="right-image">
        <img id="right-image-preview" src="">
      </label>
    </div>
    <div class="slider">
      <input type="range" id="slider" min="0" max="1" step="0.01" value="0.5" onchange="updateMiddleImage()">
    </div>

    <script>
      const leftImage = document.getElementById("left-image-preview");
      const rightImage = document.getElementById("right-image-preview");
      const middleImage = document.getElementById("middle-image");
      const slider = document.getElementById("slider");
      let leftImageData;
      let rightImageData;

      function uploadImage(input) {
        const reader = new FileReader();
        reader.onload = function() {
          const image = new Image();
          image.src = reader.result;
          image.onload = function() {
            const canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            const context = canvas.getContext("2d");
            context.drawImage(image, 0, 0);
            if (input.id === "left-image") {
              leftImage.src = reader.result;
              leftImageData = context.getImageData(0, 0, image.width, image.height);
            } else if (input.id === "right-image") {
              rightImage.src = reader.result;
              rightImageData = context.getImageData(0, 0, image.width, image.height);
            }
            updateMiddleImage();
          };
        };
        reader.readAsDataURL(input.files[0]);
      }

      function updateMiddleImage() {
        if (!leftImageData || !rightImageData) return;

        const weight = slider.value;
        const canvas = document.createElement("canvas");
        canvas.width = leftImageData.width;
        canvas.height = leftImageData.height;
        const context = canvas.getContext("2d");
        const middleImageData = context.createImageData(leftImageData.width, leftImageData.height);

        for (let i = 0; i < middleImageData.data.length; i += 4) {
          middleImageData.data[i] =
            weight * leftImageData.data[i] + (1 - weight) * rightImageData.data[i];
          middleImageData.data[i + 1] =
            weight * leftImageData.data[i + 1] + (1 - weight) * rightImageData.data[i + 1];
          middleImageData.data[i + 2] =
            weight * leftImageData.data[i + 2] + (1 - weight) * rightImageData.data[i + 2];
          middleImageData.data[i + 3] =
            weight * leftImageData.data[i + 3] + (1 - weight) * rightImageData.data[i + 3];
        }

        context.putImageData(middleImageData, 0, 0);
        middleImage.src = canvas.toDataURL();
      }
    </script>
  </body>
</html>
Um diese Webseite auf einem Webserver in Ihrem lokalen Netzwerk bereitzustellen, müssen Sie zunächst eine Webserver-Software wie Apache oder Nginx auf Ihrem Computer installieren. Sobald Sie die Webserver-Software installiert haben, müssen Sie sie konfigurieren, um Ihre Webseite bereitzustellen.

Hier sind die allgemeinen Schritte, die Sie befolgen können:

Speichern Sie den HTML-Code in einer Datei mit der Erweiterung .html, z.B. index.html.

Platzieren Sie die Datei im Stammverzeichnis des Webservers. Der Speicherort dieses Verzeichnisses hängt von der verwendeten Webserver-Software ab. Bei Apache befindet es sich beispielsweise normalerweise unter /var/www/html.

Starten Sie die Webserver-Software.

Öffnen Sie einen Webbrowser und gehen Sie zu http://[Ihre-lokale-IP-Adresse]/index.html, wobei [Ihre-lokale-IP-Adresse] die IP-Adresse des Computers ist, auf dem der Webserver läuft.

Beachten Sie, dass diese Einrichtung nur für die Bereitstellung der Webseite in einem lokalen Netzwerk gilt. Wenn Sie Ihre Webseite aus dem Internet erreichbar machen möchten, müssen Sie Ihren Router konfigurieren und Portweiterleitung zum Computer einrichten, auf dem der Webserver läuft.