Question

我想知道我在这里缺少什么，我有一个代码，用于检查图像是否基于画布透明。

＆＃13;

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

＆＃13;

当我这样做的时候：

＆＃13;

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

＆＃13;

它工作得很好，但是当我尝试将此功能设为上面时：

＆＃13;

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

＆＃13;

它不起作用......

即使在我写的这个例子中，它也可以正常工作：

＆＃13;

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

＆＃13;

我缺少什么？

Answer 1

return语句不属于函数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?）

使用回调的解决方案是可行的方法。

Answer 2

您的代码是异步的。你不能回归真假。你需要返回一个回调，这就是为什么你的if不起作用

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

回调返回true / false

2 个答案: