Question

我正在使用Canvas在使用image.onload＆amp ;;加载/绘制的图像上执行一些操作。 context.drawImage组合。我正在计算使用返回值的简单函数缩放图像的边界大小。我需要在我的代码中稍后使用这些值，但无论我做什么，我都无法将值赋给变量。在为其分配计算出的尺寸后，我也无法访问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;
});

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

Answer 1

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

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

Answer 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); } }); });

Answer 3

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);
    }

image.onload后无法使用变量值？

3 个答案: