为何Filter代码在CodePen正常运行，Sublime Text3/VS中却失效？

看起来你遇到的核心问题是JavaScript代码执行时机不对——CodePen会默认帮你处理JS的执行时机（比如自动将代码放在DOM加载完成后运行），但本地编辑器直接打开HTML文件时不会做这个处理，导致DOM元素还没加载完成就去绑定事件，自然无法触发图片上传后的Canvas渲染逻辑。

下面分点拆解原因和对应解决步骤：

1. 最关键的问题：JS执行时机过早 #

你的HTML里把<script>标签放在了<head>区域，这时候浏览器还没解析到<body>里的<input id="mainup">和<canvas id="can1">，所以document.getElementById("mainup")会返回null，事件监听根本没绑定上，自然不会响应文件上传事件。

解决办法（二选一即可）： #

• 方式一：把script标签移到body末尾
  将<script type="text/javascript" src="filter.js"></script>放到</body>标签的前面，确保DOM元素都加载完成后再执行JS代码：

  <!-- ... 其他body内容 ... -->
    <div class="btn">
      <input type="button" id="maindown" onclick="download()" />
      <label for="maindown" id="lab2">Download</label>
    </div>
    <script type="text/javascript" src="filter.js"></script>
  </body>
  </html>
  

• 方式二：用DOMContentLoaded事件包裹JS代码
  如果不想移动script标签，就在filter.js里把所有代码包裹在DOM加载完成的事件回调中：

  document.addEventListener('DOMContentLoaded', function() {
    let fileInput = document.getElementById("mainup"); 
    fileInput.addEventListener("change", function (ev) { 
      if (ev.target.files) { 
        let file = ev.target.files[0]; 
        var reader = new FileReader(); 
        reader.readAsDataURL(file); 
        reader.onloadend = function (e) { 
          var image = new Image(); 
          image.src = e.target.result; 
          image.onload = function (ev) { 
            var canvas = document.getElementById("can1"); 
            canvas.width = image.width; 
            canvas.height = image.height; 
            var ctx = canvas.getContext("2d"); 
            ctx.drawImage(image, 0, 0); 
          }; 
        }; 
      } 
    });
  });
  

2. 其他需要修正的小问题 #

• HTML结构不规范：你有部分<link>标签放在了<head>外面，应该把所有样式、字体的link标签都放到<head>内，避免渲染异常：

  <html>
  <head>
    <title>Filtaro</title>
    <link rel="shortcut icon" type="image/png" href="C:\Users\ADMIN\Desktop\filtaro.png" />
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Pacifico&display=swap" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="filter.css" />
  </head>
  <body>
    <!-- ... body内容 ... -->
  </body>
  </html>
  

• download函数未定义：HTML里有onclick="download()"，但JS中没有这个函数的定义，点击下载按钮会报错，后续可以补充实现：

  function download() {
    const canvas = document.getElementById('can1');
    const link = document.createElement('a');
    link.download = 'filtered-image.png';
    link.href = canvas.toDataURL();
    link.click();
  }
  

验证步骤 #

1. 按照上面的方法调整JS执行时机或script位置
2. 确保本地的filter.js和filter.css文件与HTML文件在同一目录下（或路径配置正确）
3. 用浏览器打开本地HTML文件，上传图片，就能看到Canvas正常显示图片了

内容的提问来源于stack exchange，提问作者Sheikh Araf