-3

Есть у меня один скрипт, который осуществляет доступ к изображениям на сервере. Коротко говоря- в GET запрос указывается путь к изображению, а скрипт проводит требуемые проверки и отправляет изображение. Однако здесь есть один момент: если загружать изображения по прямой ссылке типа site.com/image.jpg, то элемент сразу принимает соответствующие размеры, однако если использовать site.com/script.php?path=image.jpg, то элемент остается с нулевыми размерами и растягивается только тогда, когда картинка полностью загружается, а она не всегда загружается сразу. Я думаю, не стоит рассказывать о неудобствах, когда при скроллинге содержимое сайта вдруг резко перескакивает вниз.
Есть ли способ сразу отправить размеры изображения и задать их элементу? В скрипте я использую ImageMagick, может в нем есть что-то подобное? Или может все дело в браузере? Использую Opera.

3
  • Покажите, как у вас вывод изображения в браузер через script.php реализован (вопрос можно дополнить).
    – Visman
    20 дек 2016 в 4:10
  • $image->setImageFormat("jpeg"); header("Content-type: image/jpeg"); echo $image;exit;
    – Espeon
    21 дек 2016 в 4:10
  • Прошу прощения за эту сосиску. Сайт мне не дал ее нормально отформатировать.
    – Espeon
    21 дек 2016 в 4:13

2 ответа 2

1

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

<?php
$size = getimagesize('путь к физическому файлу на сервере');
?>

<img src="путь, относительно web директории" style="width: <?=$size[0]?>px; height: <?=$size[1]?>px;" />

Еще вариант с Imagick:

<?php 
$image = new Imagick($image_src); 
$d = $image->getImageGeometry(); 
$w = $d['width']; 
$h = $d['height']; 
?>
4
  • Ну, это конечно тоже вариант, но, например, если картинка не будет найдена или будет недоступна, то скрипт может вернуть специально предопределенную картинку для этого случая, а у нее могут быть другие размеры, и таких предопределенных ситуаций несколько.
    – Espeon
    21 дек 2016 в 4:09
  • @Changeling88005553535 Все очень просто. $image_src - это путь к реальному файлу. Если картинки не существует, этот путь должен вести на картинку no_image. Далее логика отработает штатно.
    – ilyaplot
    21 дек 2016 в 7:35
  • Я знаю про file_exists, но вы мне предлагаете это пихать туда откуда я запрашиваю изображение? Получается, что мне нужно делать все эти проверки перед запросом к скрипту? И смысл тогда в этом скрипте? Мне надо, чтобы при запросе к нему <strong>откуда угодно</strong> он выбирал ответное изображение, а браузер сразу же получал размеры этого ответного изображения и подстраивал элемент. Может надо дописать что-то в заголовке?
    – Espeon
    21 дек 2016 в 11:34
  • Есть две стороны вопроса. 1 - вы отдаете изображение, которое определенно должно быть на диске. В таком случае логично 1 раз записать его размеры в бд. 2 - вы отдаете изображение, которого может не быть на диске (любое), тогда придется проверять на file_exists и запрашивать размеры
    – ilyaplot
    21 дек 2016 в 12:36
1

А вы пробовали FileReader? Он даже картинку сразу покажет.

inputFile.change(function () {
    var file = this.files[0],
    reader = new FileReader(), 
    img = $('img');
    reader.onloadend = (function (file) {
    return function () {
        img.attr('src', this.result);
    })(file);
    reader.readAsDataURL(file);
});

А дальше можно уже сделать. что угодно с этой картинкой и потом залить на сервер.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.