Почему изображение отрисовывается на холсте при отладке, а не при запуске? - PullRequest
Новая
       15

Почему изображение отрисовывается на холсте при отладке, а не при запуске?

1 голос
/ 13 февраля 2012

Я изучаю HTML5 и Javascript и пытаюсь нарисовать изображение на холсте.У меня есть следующий код, который рисует изображение, если я перешагиваю код после разрыва строки, отмеченной ниже.Если я не отлаживаю, то изображение вообще не рисуется.Что я делаю неправильно?Firefox 10 с FireBug 1.9.

Обратите внимание, что хотя есть цикл для обработки нескольких изображений, я выбрал только одно.Я полагаю, что если не получится, сотня тоже не сработает.; -) 

<!DOCTYPE html>
<html>
<body>
    <input type="file" id="files" name="files[]" multiple />
    <canvas id="picCanvas" />
    <script>
        function handleFileSelect(evt) {
            var files = evt.target.files;

            // Loop through the FileList and render images
            for (var i = 0, f; f = files[i]; i++) {

                // Only process image files.
                if (!f.type.match('image.*')) {
                    continue;
                }

                var reader = new FileReader();

                // Closure to capture the file information.
                reader.onload = (function (theFile) {
                    return function (e) {
                        var img = document.createElement('img'); // <-- BREAK HERE!
                        img.src = e.target.result;

                        var canvas = document.getElementById('picCanvas');
                        canvas.width = img.width;
                        canvas.height = img.height;
                        var ctx = canvas.getContext('2d');
                        ctx.drawImage(img, 0, 0);
                    };
                })(f);

                // Read in the image file as a data URL.
                reader.readAsDataURL(f);
            }
        }

        document.getElementById('files').addEventListener('change', handleFileSelect, false);
    </script>
</body>
</html>

1 Ответ

6 голосов
/ 13 февраля 2012

Необходимо дождаться полной загрузки элемента изображения браузером, прежде чем вызывать метод drawImage, даже если ваш элемент изображения создан из строки base64, а не из внешнего файла. Так что просто используйте событие onload объекта изображения. Быстрое исправление будет выглядеть так: 

var img = document.createElement('img');

img.onload = function()
{
    var canvas = document.getElementById('picCanvas');
    canvas.width = this.width;
    canvas.height = this.height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(this, 0, 0);
}

img.src = e.target.result;
...