Können Sie bitte eine einfache statische Website in es gibt Platz für 3 horizontale Bild-Slots und 1 Schieberegler mit den folgenden Details schreiben: 1. der linksste Bild-Slot und der rechtsste Bild-Slot sind Eingänge - der Benutzer muss in der Lage sein, ein Bild hochzuladen 2. der mittlere Bild-Slot ist eine Ausgabe und ist der gewichtete Durchschnitt des Pixelwerts der beiden hochgeladenen Bilder (es wird leer gehalten, bis beide Bilder hochgeladen wurden) 3. der Schieberegler befindet sich direkt unter dem mittleren Bild-Slot geht von 0 bis 1 und bestimmt das Gewicht des linken Bildes im Durchschnitt. das Gewicht des rechten Bildes ist (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>