Доступ к глобальной переменной в функции

Итак, вот мой код, который работает отлично и точно так, как предполагалось.Доступ к глобальной переменной в функции

function setCanvasBackground (src){ 

    var source = document.getElementById('hiddenCanvas'); 
    var source_ctx = source.getContext('2d'); 
    var destination = document.getElementById('visibleCanvas'); 
    var destin_ctx = destination.getContext('2d'); 

    var img = new Image(); 
    img.onload = function(){ 
     source.width = img.width; 
     source.height = img.height; 
     source_ctx.drawImage(img, 0, 0, img.width, img.height); 
     destin_ctx.drawImage(source, 0, 0, img.width/4, img.height/4); 
    } 
    img.src = src; 
};

Однако, если я перееду переменные вне функции, поэтому они могут быть доступны из других функций, код просто не работает. Вот что я делаю:

var source = document.getElementById('hiddenCanvas'); 
var source_ctx = source.getContext('2d'); 
var destination = document.getElementById('visibleCanvas'); 
var destin_ctx = destination.getContext('2d'); 

function setCanvasBackground (src){ 
    var img = new Image(); 
    img.onload = function(){ 
     source.width = img.width; 
     source.height = img.height; 
     source_ctx.drawImage(img, 0, 0, img.width, img.height); 
     destin_ctx.drawImage(source, 0, 0, img.width/4, img.height/4); 
    } 
img.src = src; 
};

Весь код JavaScript написан в отдельном файле, а не в HTML. Что я здесь делаю неправильно?

источник

2013-07-31 Maxim Ershov

Возможно, вы хотите выбрать элементы, которые еще не были загружены в DOM. Первое место, которое вы должны посмотреть, - это консоль разработчика вашего браузера. –

Вы можете исправить это значения _assigning_ для глобальных переменных внутри setCanvasBackground или сделать это в обработчике window.onload или document/ready. –

Можете ли вы воспроизвести пример выполнения JSFiddle? – hugomg

Попробуйте это:

var source, source_ctx, destination, destin_ctx; 

window.onload=function() { 
    source = document.getElementById('hiddenCanvas'); 
    source_ctx = source.getContext('2d'); 
    destination = document.getElementById('visibleCanvas'); 
    destin_ctx = destination.getContext('2d'); 
} 

function setCanvasBackground (src){ 
    // ... 
};

Вы не можете получить доступ к элементам, прежде чем они будут загружены. Это приведет к попытке доступа к элементам, которые не существуют.

источник

2013-07-31 00:24:44

Я сделал то же самое, только с одним изменением - я указал переменные прямо в функции window.onload, но он отлично работает –

Одна вещь, которую вы могли бы сделать, это добавить обратного вызова в setCanvasBackground:

function setCanvasBackground(src, callback) { 
    [...snip...] 
    img.onload = function(){ 
     source.width = img.width; 
     source.height = img.height; 
     source_ctx.drawImage(img, 0, 0, img.width, img.height); 
     destin_ctx.drawImage(source, 0, 0, img.width/4, img.height/4); 

     // all set now: 
     callback(source, source_ctx, destination, destin_ctx); 
    } 
    [...snip...] 
}

... и тогда, когда вы звоните setCanvasBackground, добавить функцию, которая не будет вызываться до тех пор, пока изображение не закончил :

setCanvasBackground(..., function(src, src_ctx, dest, dest_ctx) { 
    alert("source.width: " + src.width); 
});

источник

2013-07-31 00:32:58

Доступ к глобальной переменной в функции

ответ

Смежные вопросы