0

image.onload&context.drawImageコンボを使用してロード/描画された画像に対して、キャンバスを使用していくつかのことを実行しています。値を返す単純な関数を使用して、画像をスケーリングするための境界サイズを計算しています。コードの後半で使用するためにこれらの値が必要ですが、何をしても値を変数に割り当てることができません。また、キャンバスに計算された寸法を割り当てた後、キャンバスの 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 に答える