javascript - Filobjekt till bild med rätt filnamn istället för src="blob..."

Jag har ett File-objekt myFile som ser ut så här i konsolen:

File {
  name: "myimage.jpg", 
  lastModified: 1465476925001, 
  lastModifiedDate: Thu Jun 09 2016 14:55:25 GMT+0200 (CEST), 
  size: 33002
  type: "image/jpeg"
}

Men när jag skapar en bild av det med

var image = new Image();
image.src = URL.createObjectURL(myFile);

Jag får:

<img src="blob:http://myurl.com/6b2b83d8-ac36-40c1-8ab1-c4f07b019ba5">

När jag försöker spara filen med högerklick är filnamnet tomt eller "6b2b83d8-ac36-40c1-8ab1-c4f07b019ba5" istället för "myimage.jpg". Filnamnet från filobjektet är borta. Finns det något sätt att sätta bildfilens namn?

Svar #1

Problemet

Objektet File är en sorts utökad version av en Blob som gör det möjligt för det att innehålla metadata såsom filnamn, storlek osv.

Men medan createObjectURL() kommer att referera till både File och Blob, kommer de data som läses via blob:-protokollet endast att bestå av själva binära filinformationen, precis som när man laddar via andra protokoll. Ingen metadata (såsom filnamn) kommer att tillhandahållas via protokollet.

Andra exempel där filnamnet inte tas i beaktande kan vara när en bild laddas via till exempel en PHP- eller ASPX-sida (/getimage.aspx?id=1). Även här tillhandahålls ingen metadata och webbläsaren skulle föreslå något som "getimage.aspx%3Fid=1" som filnamn i detta fall. Som förväntat.

Själva IMG-taggen antar aldrig något filnamn även om ett används vid källpunkten; den håller endast det som ges till den via src-attributet/egenskapen som det är, som en anslutningspunkt för att hämta de nödvändiga binära data för avkodning.

I detta fall är källpunkten blob:*/* vilket sedan kommer vara vad IMG-taggen refererar till via src, och är vad webbläsaren använder när datan ska sparas.

Tillfälliga lösningar

Det enda sättet att behålla ett filnamn från File-objektet är att hålla reda på det så att du har åtkomst till det när det behövs för nedladdning.

Men detta är också begränsat eftersom du endast kan specificera ett filnamn med download-attributet i en A-tagg. Och naturligtvis stöder vissa webbläsare, såsom <= IE11, inte detta attribut.

<a href="blob:.." download="filename.jpg"><img ..></a>

I IE10+ finns det den proprietära metoden msSaveBlob() som kan användas istället:

window.navigator.msSaveBlob(myBlob, 'filename.jpg');

Förutom dessa finns det inget vanligt sätt att specificera ett standardfilnamn från klienten.

Exempel fiol