true/false를 반환하는 콜백

Question

내가 캔버스에 기반하여 이미지가 투명한지 확인하는 코드가 여기에 누락되어 있는지 궁금합니다.

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

그것은 잘 작동하지만을 나는이 기능을 만들려고 할 때 위처럼 :

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

그것은 작동하지 않습니다 ...

심지어 내가 쓴이 예에서는 상점

잘 작동 :

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

내가 뭘 실종 됐어?

Answer 1

코드가 비동기입니다. true 또는 false를 반환 할 수 없습니다. 당신은 왜

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

반환-문이 기능 Transparent에 속하는되지 작동하지 않는 경우 콜백 그게 전부를 반환해야!

여기에 다른 함수를 만들면 호출 할 때 true 또는 false를 반환하지만 즉시 실행되지 않고 반환 값이 함수 Transparent에 반환되지 않습니다.

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

(이 지방 화살표 기능, this을 캡처 What does "this" refer to in arrow functions in ES6?를 볼 수 있기 때문에 실제로는 동일하지 않습니다)

콜백과 솔루션에 갈 수있는 방법입니다 : 당신이 무엇 는 기본적으로이 조각입니다.