画布imageData操作

Question

我正在玩画布imageData和我有一些问题的速度。我所做的是

$(document).ready(function(){
        loadCanvas();
        myImageData();

});
function loadCanvas(){
    canvas = document.getElementById('myCanvas');
    context = canvas.getContext('2d')
    image = new Image();
    image.src = '/static/images/teeth1.jpg';
    image.onload = function (){
        imageWidth = image.width;
        imageHeight = image.height;
        context.drawImage(image, 0, 0, image.width, image.height);
        imageData = myImageData(context, image);
        pixels = imageData.data;
        console.log(pixels);
        console.log(pixels.length);
        console.log(imageData);  

        //Changing the value of each pixel
        for (var y=0; y<=imageHeight; ++y){
            for (var x=0; x<=imageWidth; ++x){
                index = (y*imageWidth + x) * 4;
                pixels[index] += 30;
                pixels[++index] += 30;
                pixels[++index] += 30;
            }
        }                       
    }   

}
function myImageData(context){
    console.log("width: "+image.width+", height:"+image.height)
    return context.getImageData(0, 0, image.width, image.height);
}

当我从chrome的控制台在onload函数之外执行上面的代码时，它工作得非常快。但是，在onload函数中执行double for's时(就像现在一样)，它会挂起。为什么会这样呢？是因为它在装货箱里吗？如何确保映像在执行双fors之前已完全加载(因此，将它们单独放置在onload函数之外)？

Answer 1

// Define functions before using them (Good to)
function loadCanvas(){     
    var canvas = document.getElementById('myCanvas'); // Define variables!
    var context = canvas.getContext('2d');
    var image = new Image();     
    image.onload = function (){
        var imageWidth  = image.width;  // Variables again!
        var imageHeight = image.height;
        context.drawImage(image, 0, 0, imageWidth, imageHeight );
        var imageData = myImageData(context, image); // Variables!
        var pixels = imageData.data;
        console.log(pixels);
        console.log(pixels.length);
        console.log(imageData);  
        //Changing the value of each pixel
        for (var y=0; y<=imageHeight; ++y){
            for (var x=0; x<=imageWidth; ++x){
                var index = (y*imageWidth + x) * 4;
                pixels[index] += 30;
                pixels[++index] += 30;
                pixels[++index] += 30;
            }
        }                      
    };
    image.src = '/static/images/teeth1.jpg'; // Set src here
}
function myImageData(ctx, img){  // Pass the actual image as argument
    console.log("width: "+img.width+", height:"+img.height);
    return ctx.getImageData(0, 0, img.width, img.height);
}
$(document).ready(function(){
    loadCanvas();    // has myImageData() so...
    //myImageData(); // why??
});