javascript - 更改 img.src 并不总是立即加载新图像

Question

我有一个简单的演示，用户可以在其中选择图像文件，并且我想将图像文件的 RGB 值提取为 ImageData。这是我的尝试：

<form>
  <label for="img">Select image:</label>
  <div>
    <input type="file" id="img" name="img" accept="image/*" onchange="loadImage(this)"> 
  </div>
</form>

<canvas id="origCanvas" .../>

function loadImage(input) {
    if (input.files && input.files[0]) {
        var imageFile = input.files[0]
        var reader = new FileReader();
        reader.onload = function() {
            var img = new Image(CANVAS_WIDTH, CANVAS_HEIGHT);
            img.src = reader.result;
            readRGB(img);
        }
        reader.readAsDataURL(imageFile);
    }
}

function readRGB(img) {
    var c = document.getElementById("origCanvas");
    var ctx = c.getContext("2d");
    ctx.drawImage(img, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
    imageData = ctx.getImageData(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
    // do something else
}

但是，当我继续选择不同的文件时，readRGB 有时只会提取正确的 imageData。其他时候，我提取的 imageData 是画布上已经存在的旧 imageData。

我的直觉说 img.src = reader.result 是一个异步操作，加载 img 时由浏览器决定。很多时候，当我尝试 ctx.drawImage(img) 时，我最终绘制了一个空画布，因为 img 尚未加载实际的图像文件。

我的猜测是否正确，在这种情况下我该怎么办？

标签： javascripthtmlimagefilereadergetimagedata