Почему codepen работает для кода фильтра, который я написал, но не sublimetext3 или Visual Studio? - PullRequest
Новая
       135

Почему codepen работает для кода фильтра, который я написал, но не sublimetext3 или Visual Studio?

1 голос
/ 30 мая 2020

Я новичок и только учусь HTML CSS и Javascript. Я только начал работать над этим веб-приложением фильтра для практики. Когда я пытаюсь работать в тонкой текстовой или визуальной студии, часть Javascript на самом деле не работает. Я попытался указать правильный путь и другие вещи, но он> не показывает никаких изображений, загруженных на холст, но если я скопирую этот код в codepen.io, он будет работать нормально! Я не знаю, что случилось, потому что я новичок ie. Пожалуйста, если кто-нибудь может помочь мне с правильным объяснением, я буду благодарен. Спасибо!

Это мой HTML CSS и JS код: 

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);
      };
    };
  }
});
<html>
  <head>
    <title>Filtaro</title>
    <link
      rel="shortcut icon"
      type="image/png"
      href="C:\Users\ADMIN\Desktop\filtaro.png"
    />
  </head>
  <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" />
  <link
    href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Pacifico&display=swap"
    rel="stylesheet"
  />

  <script type="text/javascript" src="filter.js"></script>
  //As my js file name was filter.js

  <body>
    <div class="bgimg"></div>
    <div class="box">
      <a href="file:///G:/HTML%20CSS%20JAVA/Project%20Filter/filter.html"
        ><h1>Filtaro</h1></a
      >
    </div>
    <div class="intro">
      <h2>Welcome to Filtaro !</h2>
      <br />
      <p>
        Filter your images with different filters.No quality decrease ! Have Fun
        !
      </p>
    </div>

    <canvas id="can1"></canvas>
    <canvas id="can2"></canvas><br />

    <div class="btn">
      <input type="file" id="mainup" multiple="false" accept="image/*" />
      <label for="mainup" id="lab1">Upload a Picture</label>
    </div>

    <div class="btn">
      <input type="button" id="maindown" onclick="download()" />
      <label for="maindown" id="lab2">Download</label>
    </div>
  </body>
</html>
...