3

When an <img> comes from the server the src attribute contains the name of the image when you right-click/"Save image as".

<img src="/myimage.jpg">

If you've created an <img> with a base64 encoding, the src name is not useful.

<img src="data:image/jpeg;base64,/9j/4AAQSkZ...">

  • When I right-click/"Save image as" in Chrome desktop, the name is always "download.jpg"

  • When I long-press in iOS/Safari I get no opportunity to see or save a name, but it gives it a unique name that's in keeping with all other images taken (e.g. "IMG_00xx.JPG" Note: I can only see this if I hook the iPhone to a computer and browse pictures. There's no interface to see the name on the actual device!)

  • When I long-press in Chrome/Android a name related to the last '/' seen in the src with a ".bin" extension is used (e.g. "9bx=.bin")

Is there a way to give the browser a name to use?

This answer (from '11) suggests, "No." Save As prompt "image name" in generic handler.ashx ?

Nine years later I'm hoping for some progress.

Scott H
  • 33
  • 4
  • Afaik, nothing has changed since then. However, media types in data urls may come with parameters. These aren't processed by the browsers but are available through JS and the dom api. Eg. ``. – collapsar May 12 '20 at 22:01
  • 1
    The JS is who has built the src from the File API, so no need to "store" it for later. This is just about giving the user a more useful interaction when saving it locally, if they choose to. – Scott H May 13 '20 at 00:15

1 Answers1

0

Use <a download="myimage.jpg" href="data:image/jpeg;base64,/9j/4AAQSkZ...">Download Image</a> instead.

greg-tumolo
  • 698
  • 1
  • 7
  • 30
  • 1
    This is an interesting answer. It solves my problem, though not in the way I anticipated. I had not thought about putting the image data in an href. I have not tested it across a lot of browsers yet, but it looks promising. – Scott H Jul 07 '20 at 16:56