Блог

Главная - Вопросы по программированию - Программа чтения файлов для предварительного просмотра изображений с использованием события прокрутки

Программа чтения файлов для предварительного просмотра изображений с использованием события прокрутки

#javascript #jquery

#javascript #jquery

Вопрос:

Я создал простой код для загрузки изображений с помощью Ajax и использовал FileReader для предварительного просмотра содержимого перед загрузкой..

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

Но проблема в том, что когда я запускаю событие прокрутки, будет запущен код ошибки.. «Ошибка типа: аргумент 1 FileReader.readAsDataURL не является объектом».

 $('.loaded-images-content').scroll(function () {

                $('[drawed=None]').each(function () {
                    var bottom_of_object = $(this).offset().top   $(this).outerHeight();
                    var bottom_of_window = $('.loaded-images-content').scrollTop()   $('.loaded-images-content').height();

                    if (bottom_of_window > bottom_of_object) {
                        var index = $(this).parent().parent().parent().attr('index');

                        $(this).attr('drawed', 'yes');
                        Draw_Image(index);
                    }
                });
            });


function Draw_Image(index) {
    var reader = new FileReader();
    reader.onload = function (e) {
        var tmpimage = new Image();
        tmpimage.src = reader.result;

        tmpimage.onload = function () {
            var MAX_WIDTH = 120;
            var MAX_HEIGHT = 140;

            var tmp_w = tmpimage.width;
            var tmp_h = tmpimage.height;

            if (tmp_w > tmp_h) {
                if (tmp_w > MAX_WIDTH) {
                    tmp_h *= MAX_WIDTH / tmp_w;
                    tmp_w = MAX_WIDTH;
                }
            }
            else {
                if (tmp_h > MAX_HEIGHT) {
                    tmp_w *= MAX_HEIGHT / tmp_h;
                    tmp_h = MAX_HEIGHT;
                }
            }

            var canvas = document.createElement("canvas");

            canvas.width = tmp_w;
            canvas.height = tmp_h;

            var ctx = canvas.getContext("2d");
            ctx.drawImage(this, 0, 0, tmp_w, tmp_h);


            $('#loaded-image-frame'   index   ' #preview').html(canvas);
        }
    }
    reader.readAsDataURL(filesList[index]);
}

Комментарии:

1. Что такое filesList ? Кроме того, вам, вероятно, не нужен FileReader canvas , вы можете просто использовать <img> с его src значением URL.createObjectURL(yourFile) , которое будет URI большого двоичного объекта , и URL.revokeObjectURL(yourBlobURI) когда вам это больше не нужно, и поскольку кажется, что изображения поступают с пользовательского ввода, вы можете опустить время загрузки (и, следовательно, вашу прокрутку), оно будет состоять только из времени рендеринга, выборки нет.

2. Список файлов — это массив, содержащий файлы из <input> file.. В прошлом я использовал <img> с его src, но страница сайта была очень плохой во время прокрутки из-за размера изображений, поэтому я попытался использовать canvas !!

3. С точки зрения CSS, Canvas repaint точно такой же, как в img, поэтому вам действительно не нужен canvas, вы можете сохранить прокрутку, просто изменив отображение ваших изображений. И filesList это массив, который вы создали, или тот, из input.files которого?

4. Список файлов — это созданный мной массив, но как насчет производительности страницы при предварительном просмотре некоторого изображения с исходным размером. как насчет ошибки «TypeError: аргумент 1 FileReader.readAsDataURL не является объектом».

5. Если вы правильно настроили изображения width и height , все должно быть в порядке. Ваша ошибка означает, что filesList не содержит файла по индексу, к которому вы пытаетесь получить доступ (может быть проверено console.log(filesList[index]) перед вызовом readAsDataURL() .)

Ответ №1:

Ваша ошибка означает, что в списке файлов нет файла с индексом, к которому вы пытаетесь получить доступ

Правильно, спасибо..