Callback Returning True/False

Question

Ich frage mich, was ich hier vermisse Ich habe einen Code, der überprüft, ob das Bild basierend auf Canvas transparent ist.

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); 
 
     } 
 
    }; 
 
}

Wenn ich es so mache:

 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);

Es funktioniert ganz gut, aber wenn ich versuche, um diese Funktion zu machen oben wie folgt:

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"); 
 
}

Es funktioniert nicht ...

Auch tho in diesem Beispiel, die ich schrieb es funktioniert:

function check(a, b) { 
 
\t var result = a + b; 
 
\t if (result <= 10) { 
 
\t \t return (false); 
 
\t } else { 
 
\t \t return (true); 
 
\t } 
 
} 
 

 

 
function test() { 
 
\t if (check(5, 4)) { 
 
\t \t console.log(">10"); 
 
\t } else { 
 
\t \t console.log("<10") 
 
\t } 
 
} 
 
test();

Was i vermisse ich?

Answer 1

Ihr Code ist asynchron. Sie können nicht wahr oder falsch zurückgeben. Sie benötigen ein Rückruf das ist zurückzukehren, warum Ihr, wenn nicht

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"); 
 
    } 
 
    }) 
 
)

Answer 2

Die Rück Aussagen sind nicht auf die Funktion Transparent gehört, funktioniert!

Sie erstellen hier eine andere Funktion, die beim Aufruf true oder false zurückgibt, aber sie wird nicht sofort ausgeführt und ihr Rückgabewert wird in Ihrer Funktion Transparent nicht zurückgegeben. Was Sie haben, ist im Wesentlichen dieses Schnipsel:

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; 
} 

(dies sind nicht eigentlich die gleiche, da Funktionen Fett Pfeil this erfassen, siehe What does "this" refer to in arrow functions in ES6?)

Ihre Lösung mit dem Rückruf ist der Weg zu gehen.