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?
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.
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"); } }) )
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.