User:3つの水平画像スロットと1つのスライダー用のスペースがあり、次の詳細を記載してください。
1.左のほとんどの画像スロットと右端の画像スロットは入力です - ユーザーは画像をアップロードできる必要があります
2.中央画像スロットは出力であり、2つのアップロードされた画像のピクセル値の加重平均です（両方の画像がアップロードされるまで空白に保たれます）
3.スライダーは、中央の画像スロットの真下に0から1になり、平均で左端の画像の重量を決定します。右端の画像の重みは（1 -Slider_Weight）です Assistant:<！doctype html>
<html>
  <head>
    <style>
      .image-slot {
        幅：33.33％;
        高さ：300px;
        フロート：左;
        テキストアライグ：センター;
        位置：相対;
        ボーダー：1pxソリッドブラック。
      }
      .image-slot input [type = "file"] {
        位置：絶対;
        トップ：50％;
        左：50％;
        変換：翻訳（-50％、-50％）;
        不透明：0;
      }
      .image-slot img {
        最大幅：100％;
        Max-Height：100％;
      }
      .Slider {
        クリア：両方;
        幅：100％;
        マージントップ：20px;
      }
    </style>
  </head>
  <body>
    <div class = "image-slot">
      <入力型= "file" id = "left-image" onchange = "uploadimage（this）">
      <ラベル= "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">
      <入力型= "file" id = "right-image" onchange = "uploadimage（this）">
      <ラベル= "right-image">
        <img id = "right-image-preview" src = "">
      </label>
    </div>
    <div class = "slider">
      <入力型= "range" id = "slider" min = "0" max = "1" step = "0.01" value = "0.5" onchange = "updatemiddleimage（）">
    </div>

    <スクリプト>
      const leftimage = document.getElementById（ "left-image-preview"）;
      const rightimage = document.getElementById（ "red-image-preview"）;
      const middleimage = document.getElementById（ "Middle-Image"）;
      const slider = document.getElementById（ "Slider"）;
      reftimagedataを挙げます。
      redimagedataをしましょう。

      関数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"）{
              reftimage.src = reader.result;
              reftimagedata = 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]）;
      }

      関数updatemiddleimage（）{
        if（！reftimagedata ||！rightimagedata）return;

        const weight = slider.value;
        const canvas = document.createelement（ "canvas"）;
        canvas.width = reftimagedata.width;
        canvas.height = reftimagedata.height;
        const context = canvas.getContext（ "2d"）;
        const middleimagedata = context.createimagedata（reftimagedata.width、reftimagedata.height）;

        for（i = 0; i <middleimagedata.data.length; i += 4）{
          midderimagedata.data [i] =
            weight * reftimagedata.data [i] +（1 -weight） * rightimagedata.data [i];
          midderimagedata.data [i + 1] =
            weight * reftimagedata.data [i + 1] +（1 -weight） * rightimagedata.data [i + 1];
          Middleimagedata.data [i + 2] =
            Weight * leftimagedata.data [i + 2] +（1 -weight） * rightimagedata.data [i + 2];
          midderimagedata.data [i + 3] =
            weight * reftimagedata.data [i + 3] +（1 -weight） * rightimagedata.data [i + 3];
        }

        Context.putimagedata（Middleimagedata、0、0）;
        middleimage.src = canvas.todataurl（）;
      }
    </script>
  </body>
</html> 
User:ローカルネットワークのWebサーバーでこれを提供するにはどうすればよいですか？
どのハードウェアとソフトウェアについて？
多くの人々は、オープンソースであり、ローカルネットワーク、イントラネット、インターネットの両方で広く使用されているApacheを好みます。
しかし、多くの選択肢があります。特に、静的ウェブページのみをホストしたい場合。