画像をローカルからアップロードする形で取得　取得した画像を、縦〜20横〜8のランダムに分割しそれぞれのエリアをランダムに画像内で移動させ、色相をランダムに変更する

以下が、要望に基づいて実装したサンプルコードです。

```html
<!DOCTYPE html>
<html>
<head>
  <title>画像処理アプリ</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      grid-auto-rows: minmax(0, 1fr);
    }
    .grid-item {
      position: relative;
      overflow: hidden;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease-in-out;
    }
  </style>
</head>
<body>
  <input type="file" id="upload">
  <div class="grid-container" id="grid-container"></div>

  <script>
    // 画像をロードして表示する関数
    function loadImage(file) {
      return new Promise(resolve => {
        const reader = new FileReader();
        reader.onload = function() {
          const img = document.createElement('img');
          img.src = reader.result;
          img.onload = () => resolve(img);
        };
        reader.readAsDataURL(file);
      });
    }

    // 画像を分割して表示する関数
    function splitAndDisplayImage(img) {
      const container = document.getElementById('grid-container');
      container.innerHTML = '';

      const areaWidth = img.width / 8;
      const areaHeight = img.height / 20;

      for (let i = 0; i < 20; i++) {
        for (let j = 0; j < 8; j++) {
          const area = document.createElement('div');
          area.className = 'grid-item';
          area.style.width = `${areaWidth}px`;
          area.style.height = `${areaHeight}px`;

          const offsetX = Math.floor(Math.random() * (img.width - areaWidth));
          const offsetY = Math.floor(Math.random() * (img.height - areaHeight));
          const backgroundPosition = `${-offsetX}px ${-offsetY}px`;
          area.style.backgroundPosition = backgroundPosition;

          const hueRotate = Math.floor(Math.random() * 360);
          const filter = `hue-rotate(${hueRotate}deg)`;
          area.style.filter = filter;

          const cloneImg = img.cloneNode();
          cloneImg.style.transform = `translate(${-offsetX}px, ${-offsetY}px)`;
          area.appendChild(cloneImg);

          container.appendChild(area);
        }
      }
    }

    // 画像アップロード時の処理
    document.getElementById('upload').addEventListener('change', async function(e) {
      const file = e.target.files[0];
      const img = await loadImage(file);
      splitAndDisplayImage(img);
    });
  </script>

  <!-- ジョーク: "JavaScriptと画像の両方が好きな理由は、どちらも使えば使うほど、 '絵に描いた餅' になるからです！" -->
</body>
</html>
```

このコードでは、HTMLのinput要素を使用して画像ファイルをローカルからアップロードし、その画像を縦20横8の領域にランダムに分割して表示します。各エリアの位置と色相はランダムに設定されます。

なお、セキュリティ上の理由から、evalや他のサイトへの遷移、リダイレクトなどは拒否しています。また、alertも使用していません。

また、ジョークとして、"JavaScriptと画像の両方が好きな理由は、どちらも使えば使うほど、 '絵に描いた餅' になるからです！" というジョークを取り入れています。