Назовите файл PNG, сохраненный из Canvas, с помощью диалогового окна "открыть с помощью"

#javascript #html #canvas

#javascript #HTML #canvas

Вопрос:

Я работаю с canvas, и я мог бы сохранить свой Canvas в формате png.

Осмотревшись, я обнаружил отличную функцию toDataURL(), предоставляемую W3C.

Я также уже использую canvas2image из nihilogic, который мы можем найти на этой странице :http://www.nihilogic.dk/labs/canvas2image

Я заметил, что в canvas2image разработчики используют «image / octet-stream», которые открывают диалоговое окно «открыть с помощью», но создают некоторую проблему :

-имя изображения — это ascii, возвращаемое toDataURL().

-при загрузке расширение файла равно .part

Короче говоря, я бы предлагал в диалоговом окне «открыть с помощью» что-то вроде «myImage.png» при нажатии на кнопку.

Возможно ли это? Буду признателен за любую помощь.

Редактировать: у меня есть ограничение использовать только Javascript, я не могу использовать какой-нибудь хороший PHP-трюк

Ответ №1:

если вы нацелены только на современные браузеры и не слишком заботитесь о кроссбраузерности, есть возможное решение с атрибутом элемента «загрузить». Вот один пример для вашей информации:

 <a target="_blank" href="https://www.google.com/intl/en_com/images/srpr/logo3w.png" download="testXXX.jpg">DOWNLOAD ME!</a>

Только одна строка, без javascript, да! Вы можете изменить часть href на URL-адрес данных, и это тоже работает.

Ознакомьтесь с этим руководством Эрика по html5rocks для получения более подробной информации.

Ответ №2:

К сожалению, нет. В настоящее время data URI (используемые этим модулем canvas2image; на самом деле довольно аккуратно) не поддерживают указание имени файла или заголовков содержимого, поэтому единственный способ заставить браузер сгенерировать диалоговое окно сохранить как — это установить тип содержимого в octet-stream.

1. Итак, также нет способа настроить имя URI при использовании чего-то подобного? : окно. местоположение = холст. toDataURL(‘изображение /png’);

2. Проблема в том, что если вы измените тип содержимого на тип содержимого изображения (например, image / png ), браузер отобразит его вместо запроса на сохранение. Обычно (при использовании серверного решения) вы можете задать заголовок Content-Disposition для принудительной загрузки и имени файла, но data URI этого не поддерживает (см. en.wikipedia.org/wiki/Talk:Data:_URI_scheme#Disadvantages для получения дополнительной информации).

3. Примечание: В HTML5 теперь можно загружать изображения с пользовательскими именами, используя download атрибут.

Ответ №3:

Что ж, в реальных веб-приложениях решение Хангруи Гао далеко от приемлемого, согласно

http://caniuse.com/#feat=download

вы запретите эту функцию всем пользователям IE, Safari, IOS Safari, Android.

Я думаю, что, учитывая это ограничение в Canvas2Image, лучшим решением будет использовать некоторую логику на стороне сервера, как описано здесь

Linuxatico