toDataURL(） 不返回有效图像，除非先发出警报

我正在从HTML表单上传图像并使用Image（）在画布上调整图像大小。

这是我所拥有的：

var MAX_HEIGHT = 10;
var target = document.getElementById("filesInfo");
var preview = document.getElementById("preview");
var canvas = document.getElementById("canvas");
var render = function(src)
{
    var img = new Image();
    img.onload = function()
    {
        if(img.height > MAX_HEIGHT) 
        {
            img.width *= MAX_HEIGHT / img.height;
            img.height = MAX_HEIGHT;
        }
        var ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        preview.style.width = img.width + "px";
        preview.style.height = img.height + "px";
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0, img.width, img.height);
    };
    img.src = src;
};
function fileSelect(evt) 
{
    var files = evt.target.files;
    var result = '';
    var file;
    for (var i = 0; file = files[i]; i++) 
    {
        if (!file.type.match('image.*')) 
            continue;
        reader = new FileReader();
        reader.onload = function(e)
        {
            render(e.target.result);
        };
        reader.readAsDataURL(file);
        alert('foo');
        result += '<li>' + file.name + ' ' + file.size 
        + ' bytes <img src="'+document.getElementById("canvas").toDataURL()+'"></li>';
    }
    document.getElementById('filesInfo').innerHTML = '<ul>' + result + '</ul>';
}

如果我删除警报（'foo'），则图像数据不会进入（它是一个空白图像）。 只有当我插入警报时，它才真正起作用。 我在这里错过了什么？