Изменить расширение изображения по умолчанию в JavaScript

Question

У меня есть страница на моем сайте, на которой отображаются изображения.Когда я щелкаю правой кнопкой мыши на изображении и нажимаю Save Image As, я получаю имя по умолчанию.Я хочу изменить имя изображения правой кнопкой мыши и сохранить его.

Это, например:
В моем коде HTML у меня есть
image src="abc.jpeg"

Когда я щелкаю правой кнопкой мышиЯ хочу, чтобы это изображение было сохранено как def.jpg.

Есть ли способ сделать это?

Answer 1

Насколько я знаю, вы не можете сделать это с помощью JavaScript .Это то, что может быть обработано только на серверной стороне .

Если вы используете PHP, простое решение будет использовать header () .

// It will be called downloaded.pdf
header('Content-Disposition: attachment; filename="downloaded.pdf"');

Вы можете заменить download.pdf на переменную курса.

header('Content-Disposition: attachment; filename="' . $fileName .'"');

Из документации PHP:

Если вы хотите, чтобы пользовательПолучив запрос на сохранение данных, которые вы отправляете, таких как сгенерированный файл PDF, вы можете использовать заголовок »Content-Disposition для указания рекомендуемого имени файла и заставить браузер отобразить диалоговое окно сохранения.

Answer 2

Ну, есть способ сделать это ... но я не уверен, работает ли он с большинством браузеров. Добавьте атрибут oncontextmenu="return false;" в тег вашего тела. Это отключит контекстное меню (надеюсь?!)!

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

Answer 3

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

Полагаю, вы хотите дать ссылку на большие версии ваших миниатюр. Так что просто поместите ссылку (<a>) вокруг ваших тегов изображений, и все будут счастливы. Если вы укажете ссылку с описательной подсказкой, это будет еще лучше.

---

EDIT:

Если у вас уже есть изображение, включенное в страницу, вы не можете изменить заголовок по умолчанию, который пользовательский агент предложит при нажатии [Сохранить как]. Точка, никаких исключений.

Браузер, скорее всего, будет использовать имя файла из пути загрузки. Вы не можете изменить атрибут src динамически (по сценарию), потому что это приведет к загрузке другого файла. То, что вы можете сделать, это доставить страницу с файлами, уже находящимися под их именами, но это должно быть сделано на сервере.

Таким образом, опция # 2 запускает (новую) загрузку файла. В заголовке Content-Disposition вы можете динамически (на сервере) предлагать любое имя файла для отправляемого контента. Для начала загрузки просто оберните ваше изображение в ссылку (из которой вы даже можете изменить атрибут href). Или вы можете создать собственное контекстное меню для отображения ссылки на загрузку в виде кнопки [Сохранить как] (как это сделать - вопрос другого вопроса).

Вариант № 3 - открыть файл в новой вкладке / окне, применить к нему document.execCommand("SaveAs", [...]) и снова закрыть вкладку / окно. К сожалению, это поддерживается только в Internet Explorer; см. Работает ли execCommand SaveAs в Firefox? для этого и предложений.

Answer 4

Вы помещаете это в изображение

<img src=".." onClick="this.src='new URL'">

или вы можете сделать это в отдельной функции

<img src=".." onClick="change(this)">
//
<script>
function change(img) {
img.src = 'new src';
}
</script>