0

image.onload我正在使用 Canvas 在使用&context.drawImage组合加载/绘制的图像上执行几件事。我正在使用一个返回值的简单函数来计算缩放图像的边界大小。我需要这些值以供稍后在我的代码中使用，但无论我做什么，我都无法将这些值分配给变量。在为 Canvas 分配计算尺寸后，我也无法访问 Canvas 的 styleheight/stylewidth 属性。

这是我的代码的伪充足

$(document).ready(function(){
    //Canvas access, context reference etc here.
    //Since I'm assigning styles to the canvas on the fly, the canvas has no ht/wdt yet

    var dimes = '';
    var image = new Image();
    image.onload = function(){
        //Apply original image height/width as canvas height/width 'attributes'
        //(so that I can save the original sized image)
        //Check if the image is larger than the parent container
        //Calculate bounds if not
        //Apply calculated dimensions as 'style' height/width to the canvas, so that the image fits
        dimes = scaleImage(...);

        //Works!
        console.log(dimes);

        //Rest all code
    }

    image.src = '...';

    //Blank!!!
    console.log(dimes);

    //These all blank as well!!!
    jQuery('#mycanvas').height() / width() / css('height') / css('width');
    document.getElementById(canvas).style.height / .style.width / height / width;
});

我需要访问“重置”类型的函数的计算尺寸，该函数将我的画布与绘制的图像重置为计算的大小。

4

3 回答 3

2

您的img.onload函数只能在 JavaScript 执行线程停止忙碌后运行，即在您的ready函数完成后。因此，您的console.log(dimes)调用在您的onload函数之前运行。

将需要使用的任何代码放入函数dimes内部。onload否则，需要使用的代码dimes可能会在onload处理程序触发之前运行。

于 2012-12-13T17:31:34.377 回答
2

正如@apsillers 所指出的，console.log(dimes)在您简单地定义image.onload()事件处理程序之后执行代码。

如果您想在dimes外部访问image.onload()，您需要确保在图像加载后执行它...例如作为对按钮单击的响应。

把它放在var dimes = "";前面$(document).ready()使它成为一个全局变量。

然后，如果您需要dimes在事件处理程序中访问，它已经为您准备好了：

$(document).ready(function() {
    var image = new Image();
    var dimes = "";

    image.onload = function() {
       dimes = scaleImage(...);
    };

    $(button).click(function() {
        if (dimes === "") {
           // image is not yet loaded
        } else {
            console.log(dimes);
        }
    });
});

当然，dimes现在只能在第一个$(document).ready()事件处理程序中访问。如果添加另一个（当然可以在 jQuery 中完成），则需要使用$.fn.data()jQuery 对象方法来存储dimes：

$(document).ready(function() {
    var image;
    $(document).data("dimes", "");   // initializes it

    image.onload = function() {
        $(document).data("dimes", scaleImage(...));
    };
});
// some other code

$(document).ready(function() {
    $("#myButton").click(function() {
        var dimes = $(document).data("dimes");
        if (dimes === "") {
            // image not yet loaded
        } else {
            console.log(dimes);
        }
    });
});
于 2012-12-13T17:42:45.360 回答
0

http://jsfiddle.net/KxTny/1/

$(document).ready(function(){

    var dimes = 0;
    var width = 20;
    var height = 30;

    pass(dimes, width, height);

});​

function pass(dimes, width, height) { 
         alert(dimes);
         alert(height);
         alert(width);
    }
于 2012-12-13T17:33:15.427 回答