Missing rozszerzenie podczas zapisywania obrazu z płótna

Question

używam tego kodu do zapisywania obrazów w JavaScript:

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

Kod działa, ale plik zapisany nie ma żadnego rozszerzenia, muszę go zmienić nazwę ręcznie.

Moje pytanie brzmi: jak mogę umieścić przedłużenie na końcu?

Dziękuję.

Answer 1

tworzy dane-uri zamiast nazwy pliku, więc rozszerzenia nie mają zastosowania w tym przypadku.

Dane-uri to po prostu zakodowana w tekście wersja binarnej treści, którą niektóre przeglądarki mogą odczytywać jako plik - strumień danych, jeśli zechcesz. Ponieważ strumienie danych nie mają nazwy pliku, nie można ich dołączyć.

Można to obejść ustawiając znacznik zakotwiczenia tak:

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

W JavaScript można ustawić te atrybuty dynamiczne:

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