回调返回true / false

Question

I'm wondering what I am missing here I have a code that checks if the image is transparent based on canvas.

 function Trasparent(url, npc, clb) { var img = new Image(); img.src = url; img.onload = () => { canvas.width = img.width; canvas.height = img.height; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0); var maxlength = Math.sqrt(img.width * img.height) * 5 + 300; if (canvas.toDataURL().length < maxlength) { clb(false, npc); } else { clb(true, npc); } }; } 

When I'm doing it this way:

  function Trasparent(url, npc, clb) { var img = new Image(); img.src = url; img.onload = () => { canvas.width = img.width; canvas.height = img.height; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0); var maxlength = Math.sqrt(img.width * img.height) * 5 + 300; if (canvas.toDataURL().length < maxlength) { clb(false, npc); } else { clb(true, npc); } }; } function callback(success, npc) { if (success) { console.log("Not trasparent"); } else { console.log("Trasparent"); } } Trasparent(npc.icon, npc, callback); 

It works just fine, but when I'm trying to make this function above like this:

 function Trasparent(url, npc) { var img = new Image(); img.src = url; img.onload = () => { canvas.width = img.width; canvas.height = img.height; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0); var maxlength = Math.sqrt(img.width * img.height) * 5 + 300; if (canvas.toDataURL().length < maxlength) { return false; } else { return true; } }; } if(Transparent(npc.icon, npc)){ console.log("Not transparent"); } else { console.log("Trasparent"); } 

It doesn't work...

Even tho in this example which i wrote it works fine:

 function check(a, b) { var result = a + b; if (result <= 10) { return (false); } else { return (true); } } function test() { if (check(5, 4)) { console.log(">10"); } else { console.log("<10") } } test(); 

What i am missing?

Answer 1

The return-statements are not belonging to the function Transparent !

You are creating a different function here which returns true or false when it is called, but it is not executed right away and it's return-value is not returned in your function Transparent . What you have is essentially this snippet:

function Trasparent(url, npc) {
    var img = new Image();
    img.src = url;
    img.onload = function() {
      // function body totally unrelated to the Transparent-function 
      // and not executed and not returning anything right now
    };
    return undefined;
}

(these are not actually the same since fat arrow functions capture this , see What does "this" refer to in arrow functions in ES6? )

Your solution with the callback is the way to go.

Answer 2

your code is async. you cant return true or false. you need to return a callback thats why your if doesn't work

 function Trasparent(url, npc,cb) { var img = new Image(); img.src = url; img.onload = () => { canvas.width = img.width; canvas.height = img.height; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0); var maxlength = Math.sqrt(img.width * img.height) * 5 + 300; if (canvas.toDataURL().length < maxlength) { cb(false); } else { cb(true); } }; } Transparent(npc.icon, npc,function(result){ if(result) console.log("Not transparent"); } else { console.log("Trasparent"); } }) )