Подтвердить что ты не робот

Ускорение веб-сайта. Загрузка нескольких изображений из браузера клиента на сервер.

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

Нажмите кнопку загрузки на веб-сайте → выберите, какие изображения вы хотите загрузить → нажмите кнопку "Отправить", чтобы загрузить все изображения на сервер (запросить "пожалуйста, подождите" ) → Загрузить успешно!

Но с точки зрения части кода мне просто интересно, есть ли более быстрый способ эффективно загружать изображения с клиентского устройства на сервер? (Использование Javascript и php)

В настоящее время я делаю сначала "вырезание" изображений на стороне клиента, а затем отправку изображений обратно на сервер. Но это очень медленно, поскольку javascript требует времени, чтобы "сократить" размер изображений. Под "вырезанием" я хочу уменьшить ширину и высоту изображения. Есть ли более быстрый способ сделать это?

(Некоторые примеры кода javascript и php также помогут.)

4b9b3361

ОТВЕТЫ

Ответ 1

Короткий ответ: Нет, Javascript не медленный, ни PHP.

Если изображение большое (несколько мегабайт), потребуется обрезка/изменение размера изображения в javascript/php. Нет способа избежать этого.

Я считаю, что у вас проблема с производительностью, потому что:

  • Вы загружаете сразу несколько изображений и...
  • Некоторые из них большие (по мегабайтам)

Рассмотрите возможность оптимизации изображений перед их загрузкой. Я предлагаю вам использовать kraken.io, что позволяет уменьшить размер изображений без изменения качества изображения (без потерь)).

Кроме того, рассмотрите возможность загрузки изображений кусками, которые:

  • Позволяет отслеживать процесс загрузки.
  • AJAX привод

Существует много плагинов для загрузки пакетов, вот один из них:

https://github.com/blueimp/jQuery-File-Upload/wiki/Chunked-file-uploads

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

Ответ 2

Попытайтесь решить эту проблему систематически! Ваша задача такая же простая: отправьте X-байты с компьютера пользователя на сервер Y как можно быстрее. Предположим, что, как только данные достигнут сервера, время обработки пренебрежимо мало. Любой современный сервер может очень быстро обрабатывать большие изображения.

Мы можем разделить возможные решения в двух категориях:

  • Уменьшить X - уменьшить количество отправляемых данных. Уменьшите изображение на стороне пользователя в JavaScript и отправьте меньшие изображения на сервер Y.

  • Переместите сервер Y ближе к пользователю (как ни удивительно, никто не упоминал об этом?) Нет необходимости развертывать несколько серверов по всему миру, вы можете просто использовать CDN (и многие из них сегодня бесплатны или очень дешевы). Несмотря на то, что CDN по-прежнему попадает на ваш веб-сервер, обычно безопасно предположить, что поставщики CDN имеют лучшую международную пропускную способность, чем средний пользователь.

Дополнительные примечания:

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

  2. В зависимости от вашего приложения UX вы можете улучшить скорость, воспринимаемую пользователем, показывая миниатюры изображений, как только файлы будут выбраны (сделаны на стороне JS), в то время как файлы все еще загружаются. Вы даже можете позволить пользователю перемещаться по странице/сайту во время загрузки - если вы не блокируете пользовательский интерфейс, медленные загрузки менее раздражают.

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

Ответ 3

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

Мое решение было:

  • Прочитайте изображения на стороне клиента, используя FileReader API. Кажется, что это не нужно.
  • Оптимизируйте каждое изображение, масштабируя и устанавливая качество, используя Canvas API. Если по какой-то причине этот процесс становится медленным, вы всегда можете использовать WebWorkers API, чтобы разделить нагрузку на несколько фоновых процессов. Преимущество в том, что проблемы с производительностью в процессе оптимизации не повлияют на ваш пользовательский интерфейс (не застрянет).
  • Объедините все изображения в один спрайт, также используя Canvas и сохраните метаданные спрайта (каждое изображение: x, y, width, height) в отдельном объекте.
  • Извлеките sprite base64 с помощью Canvas toDataURL.
  • Загрузите сжатый файл спрайта на сервер вместе с метаданными спрайтов. На сервере распакуйте файл, затем разделите его и сохраните в отдельные файлы изображений в соответствии с метаданными.

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

Update:

Здесь пример кода для кода на стороне клиента. Вы выбираете столько файлов, сколько хотите, используя поле ввода, после чего выбираются, изменяются размеры, упаковываются спрайт и экспортируются как объект, содержащий версию спрайта base64 и метаданные каждого изображения внутри него. Я сделал клик для базы данных base64 доступным, чтобы вы могли сразу увидеть результаты.

Отсутствует часть на стороне сервера, в которой вы берете объект и используете его. Вы создаете изображение с использованием uri-данных base64, я предлагаю использовать imagemagick, но любая такая библиотека будет делать трюк, затем вы обрезаете свои изображения используя библиотеку, которую вы выбрали, в соответствии с метаданными спрайтов и сохраните каждое изображение отдельно (или что-то еще).

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

Ответ 4

Нет, загрузка все равно будет медленной. Скорость в значительной степени не имеет ничего общего с кодом. Основная причина, по которой это было бы медленно, - это то, что изображения могут занимать много места. Обычно до нескольких мегабайт. Если бы вы загрузили строку текста для сравнения, это было бы намного быстрее, так как эта строка текста всего несколько байтов или килобайт. Один способ, который сделает это немного быстрее, - это поставить изображение в сжатую .zip-папку перед загрузкой на сервер. Это все равно займет очень много времени.

Ответ 5

  • Когда загружаются исходные изображения, выигрыши в оптимизации, вероятно, будут незначительными, если ваши пользователи не загружают несжатый *.bmp. Если вы повторно размещаете изображения локально, убедитесь, что было применено соответствующее сжатие - по крайней мере, установка toDataURL encoderOptions при работе с холстом, или что-то вроде JIC (демонстрация). Остерегайтесь низкого качества повторной выборки.

  • Если вы ожидаете массовой загрузки или имеете дело с пользователями с низкой пропускной способностью, вы можете захотеть ввести возобновляемые загрузки. Библиотека, подобная resumablejs, будет использовать html5 файл api и поддержку chunking, делая процесс загрузки менее болезненным при плохих связях. Это довольно мощная комбо в сочетании с усовершенствованиями UX!

  • Вместо того, чтобы сосредоточиться на производительности загрузки, вы можете добиться лучших результатов, сосредоточившись на восприятии производительности. Полезный шаблон перемещает загрузку на более ранний этап рабочего процесса. - Instagram запускает загрузку, как только изображение будет выбрано и будет продолжено в фоновом режиме, пока пользователь работает над заголовком, местоположением, параметрами совместного доступа...

    Больше мыслей слайды "Секреты молниеносного быстрого мобильного дизайна" подведены на highscalability:

    https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design?slide=82

    Перемещение бит, когда никто не смотрит. Загрузка изображений начинается с до, которую вы им сообщаете, большинство приложений ждут до появления экрана общего доступа. Правило является отправкой данных, как только оно будет готово, а затем сопоставить его с действиями пользователя позже. Это удваивает количество запросов, но воспринимаемая производительность улучшается, даже если отмена отправляется позже. Данные удаляются при отмене.

  • Загрузите CDN. Stackoverflow интегрируется с imgur для загрузки изображений и так вы можете. Конечно, это зависит от того, насколько чувствительны загружаемые файлы, ожидаемая функциональность и CDN T & Cs, но могут сохранять трафик и хранилище, предоставляя специализированный доступ api к исходным изображениям, измененным размерам копий и дополнительным метаданным.

Ответ 6

Это отличное решение, оно уменьшает размер изображения перед загрузкой.

https://github.com/blueimp/jQuery-File-Upload

Вы не сказали, были ли вы против использования jQuery, если вы можете найти эквивалентное решение, которое является чистым JavaScript.

Ответ 7

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

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

Два основных преимущества:

  • вы можете запускать несколько потоков/веб-работников параллельно
  • веб-сотрудники не блокируют основной поток и пользовательский интерфейс.

Могут ли преимущества не только ускорить обработку изображений, но и вообще избежать замораживания пользовательского интерфейса.

Ответ 8

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

Насколько велики изображения, ширина и высота и размер (мб, кб)? Сколько времени требуется, чтобы загрузить изображение? Почему вы сокращаете изображения?

Я думаю, что что-то в вашем javascript неверно - здесь - это способ, использующий canvas и File API для изменения размера изображения перед его загрузкой.

Ответ 9

сначала включите

<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.2/jquery.fileupload.min.js"></script>

 <?php
    function compress($source, $destination, $quality) { $info = getimagesize($source);
        if ($info['mime'] == 'image/jpeg')
            $image = imagecreatefromjpeg($source);
        elseif ($info['mime'] == 'image/gif')
            $image = imagecreatefromgif($source);
        elseif ($info['mime'] == 'image/png')
            $image = imagecreatefrompng($source);
        imagejpeg($image, $destination, $quality);
        return $destination;
    } 

    $source_img = 'source.jpg';
    $destination_img = 'destination .jpg';
    $d = compress($source_img, $destination_img, 90);
?>

пример:

$info = getimagesize($source); print_r($info);