Изображение холста не отображается до второй попытки

Я пытаюсь использовать этот элемент, чтобы нарисовать статическое изображение Google Maps, которое появляется на экране, как только пользователь нажимает кнопку отправки. HTML выглядит следующим образом:Изображение холста не отображается до второй попытки

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=true"> 
    </script> 
    <script type="text/javascript" src="createmap.js"> 
    </script> 
</head> 
<body> 
    <form onsubmit="display_map(34.1,-76.08168); return false;"> 
    <input type="submit" value="Submit"/> 
    </form> 
    <canvas id='map-canvas' /> 
</body> 
</html>

и функция display_map() в createmap.js:

function display_map(center0, center1) { 
    var image = new Image(); 
    image.src = 'http://maps.googleapis.com/maps/api/staticmap?center=' 
    + center0 + ',' + center1 + '&zoom=13&size=800x800&sensor=false'; 
    var canvas = document.getElementById('map-canvas'); 
    var context = canvas.getContext('2d'); 
    context.drawImage(image, 0, 0); 
}

первый раз, когда пользователь нажимает на кнопку отправки, ничего не происходит. Однако каждый последующий щелчок загружает изображение (даже если вкладка закрыта, а затем снова открыта). Изменение параметров center0 и center1 приведет к сбросу страницы и снова заставит два клика отобразить новое изображение, которое генерирует Google. Такое поведение, похоже, не происходит из Карт Google, поскольку такая же проблема возникает при загрузке изображения с моего жесткого диска. Это происходит в каждом браузере, который я тестировал (Firefox, IE и Chrome).

источник

2014-01-23 Fred the Fantastic

Это потому, что в первый раз изображение не загружено должным образом, поэтому холст ничего не рисует. Изображение загружается асинхронно в фоновом режиме, поэтому ваша функция будет продолжаться независимо.

Чтобы справиться с этим сценарием попробуйте:

function display_map(center0, center1) { 
    var image = new Image(); 
    image.onload = function() { 
     var canvas = document.getElementById('map-canvas'); 
     var context = canvas.getContext('2d'); 
     context.drawImage(this, 0, 0); 
    } 
    image.src = 'http://maps.googleapis.com/maps/api/staticmap?center=' 
    + center0 + ',' + center1 + '&zoom=13&size=800x800&sensor=false'; 
}

Это функция немедленно возвращает то, что необходимо принимать во внимание в случае, если вы делаете несколько операций отрисовки на холсте (графику сверху, например).

В этих случаях вам нужно использовать обратные вызовы так, когда изображение завершения загрузки вы вызываете следующий шаг из в onload обработчика с одним дополнительным параметром:

function display_map(center0, center1, callback) { 
    var image = new Image(); 
    image.onload = function() { 
     var canvas = document.getElementById('map-canvas'); 
     var context = canvas.getContext('2d'); 
     context.drawImage(this, 0, 0); 
     callback(); 
    } 
    image.src = 'http://maps.googleapis.com/maps/api/staticmap?center=' 
    + center0 + ',' + center1 + '&zoom=13&size=800x800&sensor=false'; 
}

Теперь вы можете создать цепочку вызовов:

function step1() { 
    display_map(center0, center1, step2); 
} 

function step2() { 
    /// called when step1 has finished 
}

источник

2014-01-23 18:34:18 K3N

Это работает. Благодаря! –

Изображение холста не отображается до второй попытки

ответ

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