Filereader不能在第一次点击时使用，但可以在第二次点击时使用

Question

我编写了一个代码，其中单击按钮时，画布上的内容将转换为blob对象，然后使用文件阅读器将该对象发送到服务器。问题是文件阅读器在第一次点击时什么也没有返回，但是在第二次点击时效果很好

input.addEventListener('click',function(){   

var canvas = document.getElementById("myCanvas");
var img = canvas.toDataURL("image/png");

// Convert Base64 image to binary
var file = dataURItoBlob(img);

const reader = new FileReader();
reader.onload = (event) => {
postData.data = event.target.result;
postData.type = file.type;
};
console.log("postData.data = " + postData.data);
console.log("postData.type = " + postData.type);

reader.readAsBinaryString(file);

是因为代码在画布转换成文件对象之前就已经在运行吗？