The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Download png from link, Cannot get download of png to work with a link
Urgaan
post May 16 2018, 06:04 AM
Post #1





Group: Members
Posts: 3
Joined: 16-May 18
Member No.: 26,646



Hi all,

I've been wanting to get an export function to work on my site, which almost works perfectly, it just does not download automatically.

Currently it generates this: <a target="_blank" download="MediumRandomNewick_treemap_outer.png" href="blob:http://localhost:8080/c02ebb93-19b9-43fa-872d-b32fc02dc56f">Export</a>

But this is not clickable and also does not force the download, can anyone tell me how I would go about force downloading? Preferably with JavaScript.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 16 2018, 08:53 AM
Post #2


.
********

Group: WDG Moderators
Posts: 7,815
Joined: 10-August 06
Member No.: 7



It seems to work if the URL in the HREF value is valid (even if the file doesn't exist). I don't know anything about blob:http, so I can't tell what's going on there.

The TARGET attribute is not necessary for this, neither is javascript.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Urgaan
post May 17 2018, 03:47 AM
Post #3





Group: Members
Posts: 3
Joined: 16-May 18
Member No.: 26,646



Removing the target attribute made it clickable, I got the force download to work but sadly it is the SVG element with the CSS in-line (which is partially what I wanted).

If I can get the SVG element out of the link I can easily download it as a png, any idea how I could go about doing that? can I use the link in the <a>?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 17 2018, 07:14 AM
Post #4


.
********

Group: WDG Moderators
Posts: 7,815
Joined: 10-August 06
Member No.: 7



Not sure I understood any of this post. unsure.gif

QUOTE(Urgaan @ May 17 2018, 10:47 AM) *

I got the force download to work but sadly it is the SVG element with the CSS in-line (which is partially what I wanted).

You mean you want to download a SVG? Or is the download link inside a SVG element?

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 17 2018, 03:28 PM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,915
Joined: 9-August 06
Member No.: 6



I guess the blob URL leads to an SVG image. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 17 2018, 04:34 PM
Post #6


.
********

Group: WDG Moderators
Posts: 7,815
Joined: 10-August 06
Member No.: 7



Seems the DOWNLOAD attribute at least works with data URIs like this:

CODE
<a download="test.png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">Example</a>

(the above should generate an image file depicting a red dot).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 18 2018, 12:53 AM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,915
Joined: 9-August 06
Member No.: 6



Duh. I didn't notice the 'data:image/png;base64' bit. Well, then I'm stumped too.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Urgaan
post May 18 2018, 01:41 AM
Post #8





Group: Members
Posts: 3
Joined: 16-May 18
Member No.: 26,646



Yeah the link downloads an SVG element as a png (as in, it is a png file, but opening it in a text editor just shows a standard html SVG element).

Sorry if I don't explain things well, not really good at explaining.

This post has been edited by Urgaan: May 18 2018, 01:46 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 18 2018, 05:08 AM
Post #9


.
********

Group: WDG Moderators
Posts: 7,815
Joined: 10-August 06
Member No.: 7



Assuming the blob URI does reference a SVG correctly (I can't tell), maybe you could convert it to a base64 data URI? Seems there are javascript functions for that nowadays.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 18 2018, 08:04 AM
Post #10


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,915
Joined: 9-August 06
Member No.: 6



QUOTE(pandy @ May 18 2018, 07:53 AM) *

Duh. I didn't notice the 'data:image/png;base64' bit. Well, then I'm stumped too.

... because it was never there. I thought you quoted from the OP's post. blush.gif

I googled some and if I understand it right, the blob protocol can't be used like this at all, hardcoded. It can only be used programmatically. If that is true only the URL in the download attribute is used.

An image can't be an SVG and a PNG at the same time. Does it open normally in an image editor? I know for example Irfan View opens images with the wrong extension but warns about it an offers to rename them properly. Most standard image editors or viewers don't handle SVG at all.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 18 2018, 08:21 AM
Post #11


.
********

Group: WDG Moderators
Posts: 7,815
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ May 18 2018, 03:04 PM) *

I thought you quoted from the OP's post. blush.gif

No it's from Wikipedia. cool.gif

QUOTE
only the URL in the download attribute is used.

Note that the attribute value only suggests a filename, it's not a actual URL.

QUOTE
Does it open normally in an image editor? I know for example Irfan View opens images with the wrong extension but warns about it an offers to rename them properly. Most standard image editors or viewers don't handle SVG at all.

That doesn't affect how the browser handles the download though, you can name the download file "foo.bar" and it will still download. But if you want the downloaded file to be usable (once downloaded), you must of course use a working file extension (at least in Windows).


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 18 2018, 03:00 PM
Post #12


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,915
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ May 18 2018, 03:21 PM) *

QUOTE(pandy @ May 18 2018, 03:04 PM) *

only the URL in the download attribute is used.

Note that the attribute value only suggests a filename, it's not a actual URL.


I see. I confess I haven't looked into the download attribute, just noted it exists.


QUOTE
QUOTE
Does it open normally in an image editor? I know for example Irfan View opens images with the wrong extension but warns about it an offers to rename them properly. Most standard image editors or viewers don't handle SVG at all.

That doesn't affect how the browser handles the download though, you can name the download file "foo.bar" and it will still download. But if you want the downloaded file to be usable (once downloaded), you must of course use a working file extension (at least in Windows).


Well, the OP said he downloaded it and opened it in a text editor.

Anyway, the blob thing must somehow work anyway, but what does it do?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 19 2018, 04:07 PM
Post #13


.
********

Group: WDG Moderators
Posts: 7,815
Joined: 10-August 06
Member No.: 7



I think we need more information about what the OP is doing.

- Where does the BLOB come from? If it's from a database, maybe it's simplest to convert it to a base64 data URI on the server side, and then use that for the download.

- How and where is a SVG generated, and where is it used? The OP haven't shown any code example of that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 20 2018, 09:10 AM
Post #14


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,915
Joined: 9-August 06
Member No.: 6



I read that a blob URL references an object that is in the browser's memory and not a physical file. Beats me how it, in this case, got into the memory to start with.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 23rd May 2018 - 04:14 PM