画像を滑らかにアスキーアートに変換する機能

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>滑らかなアスキーアート生成</title>
  <style>
    body {
      font-family: 'Courier New', monospace;
      text-align: center;
      margin: 20px;
    }
    #output {
      white-space: pre;
      font-size: 8px; /* フォントサイズの調整 */
    }
    #copyButton {
      margin-top: 10px;
      padding: 10px;
      cursor: pointer;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
    }
  </style>
  <!-- clipboard.jsのCDNを追加 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
</head>
<body>
  <h1>滑らかなアスキーアート生成</h1>
  <input type="file" id="imageInput" accept="image/*" onchange="processImage()">
  <div id="output"></div>
  <button id="copyButton" data-clipboard-target="#output">コピー</button>

  <script>
    function processImage() {
      var input = document.getElementById('imageInput');
      var output = document.getElementById('output');

      if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function(e) {
          var img = new Image();
          img.onload = function() {
            var asciiArt = generateAsciiArt(img);
            output.textContent = asciiArt;

            // Clipboard.jsの初期化
            var clipboard = new ClipboardJS('#copyButton');
            clipboard.on('success', function(e) {
              alert('アスキーアートがコピーされました！');
              e.clearSelection();
            });
          };
          img.src = e.target.result;
        };

        reader.readAsDataURL(input.files[0]);
      }
    }

    function generateAsciiArt(image) {
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      var scaleFactor = 0.1; // ピクセルを縮小する係数

      canvas.width = image.width;
      canvas.height = image.height;
      context.drawImage(image, 0, 0, canvas.width, canvas.height);

      var asciiArt = '';
      for (var y = 0; y < canvas.height; y += 4) {
        for (var x = 0; x < canvas.width; x += 2) {
          var pixel = context.getImageData(x, y, 1, 1).data;
          var brightness = (pixel[0] + pixel[1] + pixel[2]) / 3;

          // 文字や記号の選択
          var asciiChar = getAsciiChar(brightness);

          asciiArt += asciiChar;
        }
        asciiArt += '\n';
      }

      return asciiArt;
    }

    function getAsciiChar(brightness) {
      var asciiChars = '@%#*+=-:. ';

      // 輝度に応じて文字を選択
      var index = Math.floor((brightness / 255) * (asciiChars.length - 1));
      return asciiChars.charAt(index);
    }
  </script>
</body>
</html>

/* Add your styles here */

// Add your code here