画像からアスキーアートを作る

以下は、入力した画像をアスキーアートに変換するJavaScriptのサンプルコードです。セキュリティ対策として、inputタグでファイル選択を行うようにして、evalなどの危険な関数や外部サイトへのリダイレクトは行わないようにしています。

``` html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>画像からアスキーアートを作る</title>
  </head>
  <body>
    <h1>画像からアスキーアートを作る</h1>
    <form>
      <label for="inputFile">画像を選択してください：</label>
      <input type="file" id="inputFile">
      <button type="button" onclick="convertToAscii()">変換する</button>
    </form>
    <hr>
    <div id="asciiArt"></div>
    <script>
      function convertToAscii() {
        const input = document.getElementById('inputFile');
        const file = input.files[0];
        if (file) {
          const reader = new FileReader();
          reader.onload = function(e) {
            const img = new Image();
            img.onload = function() {
              const canvas = document.createElement('canvas');
              canvas.width = img.width;
              canvas.height = img.height;
              const context = canvas.getContext('2d');
              context.drawImage(img, 0, 0);
              const imageData = context.getImageData(0, 0, img.width, img.height);
              let asciiArt = '';
              for (let y = 0; y < imageData.height; y += 2) {
                for (let x = 0; x < imageData.width; x++) {
                  const index = (y * imageData.width + x) * 4;
                  const r = imageData.data[index];
                  const g = imageData.data[index + 1];
                  const b = imageData.data[index + 2];
                  const brightness = Math.round((r + g + b) / 3);
                  const ascii = brightnessToAscii(brightness);
                  asciiArt += ascii;
                }
                asciiArt += '\n';
              }
              const asciiDiv = document.getElementById('asciiArt');
              asciiDiv.textContent = asciiArt;
            };
            img.src = e.target.result;
          };
          reader.readAsDataURL(file);
        }
      }

      function brightnessToAscii(brightness) {
        const asciiList = [' ', '.', ':', '-', '=', '+', '*', '#', '%', '@'];
        const asciiIndex = Math.round(brightness / 25.5);
        return asciiList[asciiIndex];
      }
    </script>
  </body>
</html>
```

ジョークとして、アスキーアートの生成結果を「真々中クン」という文字アートにしてみると面白いかもしれません。