CODEWITHSUNDEEP
javascripthtmlfunctioncanvasonload
Maria
Maria

Reputation: 157

JS: Function works manually in console but not executed automatically in code

I copied this code snippet from here: https://codepen.io/duketeam/pen/ALEByA

This code is supposed to load a picture and make it grayscale after clicking on the button. I want to change the code such that the picture comes out immediately as grayscale without having to click on the button, hence why I commented it out and included makeGray() in the onload part of the <input...>. But this doesnt work. Where am I going wrong here?

I have tried to leave out the makeGray()and just upload the picture and type makeGray() in the console and it does its job perfectly fine, but I need it to execute automatically. I also tried to just put all the code from the makeGray() function in the upload() function but also here it won't trigger.

var image = null;

function upload() {
  //Get input from file input
  var fileinput = document.getElementById("finput");
  //Make new SimpleImage from file input
  image = new SimpleImage(fileinput);
  //Get canvas
  var canvas = document.getElementById("can");
  //Draw image on canvas
  image.drawTo(canvas);

}

function makeGray() {
  //change all pixels of image to gray
  for (var pixel of image.values()) {
    var avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue()) / 3;
    pixel.setRed(avg);
    pixel.setGreen(avg);
    pixel.setBlue(avg);
  }
  //display new image
  var canvas = document.getElementById("can");
  image.drawTo(canvas);
}
<script src="https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js">
</script>

<h1>Convert Image to Grayscale</h1>

<canvas id="can"></canvas>

<p>
  <input type="file" multiple="false" accept="image/*" id="finput" onchange="upload();makeGray()">

</p>
<p>
  <!---- <input type="button" value="Make Grayscale" onclick="makeGray()" -->
</p>
<script src="./index.js"></script>

Upvotes: 0

Views: 1126

Answers (1)

Rojo
Rojo

Reputation: 2869

There's something you need to wait for, but I'm not sure exactly what it is. If you wrap the function in a setTimeout, it works fine. You might want to wait for a few more milliseconds for clients with slower systems or bigger files. If you ever figure out what is taking a while to do, you can instead use .then or await just to be safe.

var image = null;

function upload() {
  //Get input from file input
  var fileinput = document.getElementById("finput");
  //Make new SimpleImage from file input
  image = new SimpleImage(fileinput);
  //Get canvas
  var canvas = document.getElementById("can");
  setTimeout(() => {
    //change all pixels of image to gray
    for (var pixel of image.values()) {
      var avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue()) / 3;
      pixel.setRed(avg);
      pixel.setGreen(avg);
      pixel.setBlue(avg);
    }
    image.drawTo(canvas);
  }, 100);
}
<script src="https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js">
</script>

<h1>Convert Image to Grayscale</h1>

<canvas id="can"></canvas>

<p>
  <input type="file" multiple="false" accept="image/*" id="finput" onchange="upload();">

</p>
<script src="./index.js"></script>

Upvotes: 2

Related Questions