<img src="script.php" /> в Firefox и Chrome

[miha21]

<img src="script.php" /> вызывает динамическое создание картинки сервером.

Содержимое файла script.php отдает браузеру картинку с заголовком:

header('Content-Type: image/png');
header("Content-Disposition: inline; filename=$example.png");

В результате в любом браузере видим картинку example.png.

В Firefox по правой кнопке мы сохраняем спокойно картинку с именем example.png, а в свежих версиях Chrome предпринимается неудачная попытка сохранить script.php, ранее Хром так себя не вел.

Не подскажете идею - как для Хрома изменить синтаксис <img src="script.php" /> чтобы при попытке сохранить по правой кнопке мыши динамическую картинку сохранялась именно картинка example.png, уже отданная скриптом php странице, а не предпринималась попытка сохранить серверный скрипт script.php.

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

Как покрасивее решить эту коллизию?

[Белый шум]

А почему скрипт второй раз ничего не отдаёт?

[miha21]

Потому что при нажатии правой кнопки и сохранить метод GET второй раз не отправляет задание скрипту. Может быть мне попробовать на событие по клику правой кнопки вновь формировать тот же GET-запрос?
Первый вызов картинки выглядит как script.php?и_тут_разные_GET-задания

[Белый шум]

Может быть мне попробовать на событие по клику правой кнопки вновь формировать тот же GET-запрос?

Это не поможет.

Потому что при нажатии правой кнопки и сохранить метод GET второй раз не отправляет задание скрипту.
Первый вызов картинки выглядит как script.php?и_тут_разные_GET-задания

Понятно. Да, в таком случае это явный косяк браузера. Попробуйте следующие варианты:

- при отдаче картинки выставлять HTTP-заголовки кэширования. Есть вероятность, что можно заставить браузер брать картинку из кэша при сохранении;

- попробуйте убрать заголовок 'header("Content-Disposition: inline; filename=$example.png");'. Вдруг без него браузер изменит своё поведение;

- если в качестве веб-сервера у вас apache, можно заменить параметры GET (всё, что после символа вопроса) на PATH_INFO (https://overcoder.net/q/45476/что-такое-pathinfo-в-php);

- если ничего не поможет, то остаётся самый надёжный способ - сделать GET-параметры частью файла или пути:
/path/to/param1=1/param2=2/script_param3=3_param4=4.php (знак '=' можно заменить на любой другой, например на '-')
и средствами веб-сервера направлять такие запросы на ваш скрипт.

[miha21]

Спасибо вам за советы! Второй вариант с убиранием заголовка с именем ни к чему не приводит, это как-то попробовал. Буду пробовать варианты 1,3,4. Особенно последний вариант мне кажется красивым, но про HTTP-заголовки кэширования изучу вначале.

[miha21]

Первый вариант про кеш:
header('Cache-Control: public, max-age=600');
По правой кнопке в Хроме - неудачная попытка сохранения скрипта, зато если нажать "Открыть картинку в новой вкладке" - из него спокойно картинка png уже сохраняется. Хоть что-то.
Понятно что вся эта сложная идея для того, чтобы не перегружая страницы - динамически менять на ней картинку по запросу к серверу. Но решение с открытием картинки в новой вкладке и не перегружает страницу, так что с некоторыми оговорками решение приемлемое.

[voraa]

Может проще считывать картинку отдельно, а потом подставлять ее в Img

Например

function setImg (img, url) {
fetch(url)
.then(res => res.blob())
.then(blob => img.src = window.URL.createObjectURL(blob))
}