index.html

<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>人民英雄永垂不朽！！！</title>
    <link rel="stylesheet" href="./index.css" />
    <script src="./gray.js"></script>
  </head>
  <body>
    <div class="wrapper">
      <a href="https://vvushaolin.com" target="_blank">中国加油~ ~ ~</a>
      <p>
        向抗击新冠疫情斗争牺牲的英雄致以最崇高的敬意，对逝世的同胞致以最深切的哀悼！
      </p>
      <p>幸得有你，山河无恙！</p>
      <input
        type="file"
        id="input"
        accept=".jpeg,.png,jpg"
        style="display: none;"
      />
      <canvas id="canvas" style="display: none;"></canvas>
      <button id="selectImage">选择需要灰度化的图片</button>
      <blockquote>
        死亡不是生命的终点，遗忘才是。
      </blockquote>
      <script>
        selectImage.addEventListener("click", function () {
          input.click();
        });

        input.addEventListener("change", function () {
          console.log("input.files[0]", input.files); // 是一个FileList
          const file = input.files[0]; // 得到图片项
          const imgName = file.name;
          const reader = new FileReader(); // 创建file blob
          reader.readAsDataURL(file);
          reader.onload = function (_file) {
            console.log("_file", _file);
            const image = new Image();
            image.src = _file.target.result;
            image.onload = function () {
              const a = document.createElement("a");
              a.href = gray(image);
              a.download = imgName;
              a.setAttribute("id", "downloadGrayImage");
              // 防止重复添加
              if (!document.getElementById("downloadGrayImage")) {
                document.body.appendChild(a);
              }
              a.click();
            };
          };
        });
      </script>
    </div>
  </body>
</html>