Missing расширение при сохранении изображения из холста

Question

Я использую этот код для сохранения изображений в Javascript:

window.location.href = grid.toDataURL("image/png").replace("image/png", "image/octet-stream"); 

Код работает, но файл сохранен не имеет никакого расширения, я должен переименовать его вручную.

Мой вопрос в том, как я могу разместить расширение в конце?

спасибо.

Answer 1

toDataURL производит данные-uri, а не имя файла, поэтому расширения в этом случае не применяются.

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

Вы можете обойти эту проблему путем установки тега привязки, как это:

<a id="imageLink" href="data-uri-here" download="myFilename.png"> 
    Click to download 
</a> 

В JavaScript вы можете установить эти атрибуты динамические:

imageLink.href = grid.toDataURL(); 
imageLink.download = 'myOtherFilename.png';