[Solved] How to make a download button?

Question

I have made a small project just to learn how to make a download button. In the project i have taken an image and made a slider to adjust the hue of it. Now i want to make a download button for the user to download their final image. I have given the link for an example code of this -

PS. I know it it won't work in sololearn but i want to learn how to that. (I will copy the code and try to execute it in my pc)

https://code.sololearn.com/WXZZ6NNmYI4R/?ref=app

Answer 1

Krish to my knowledge, there isn't a straight-forward way to do this. There is a library that was created that converts HTML elements (CSS included) to canvas and then canvas to image like I showed you. See below for link. The library is experimental and is inconsistent between browsers but is the only way I have found to do what you're asking.

https://github.com/niklasvh/html2canvas

Alternatively, you could use window.print() and print the current view of the site to PDF then convert that to an image.

There's really not an elegant way to do this without basically coding a better library than the one I linked above.

Answer 2

Krish

I can only see that there's a option for "hue" in the output! Where we can set that..

And the query here is totally different..

So what exactly are you asking for?

Answer 3

I think this do not work and the image has to be overworked before. For example in canvas. More info:

https://www.w3schools.com/tags/att_download.asp

Download example you can see here:

https://code.sololearn.com/WvutKI1YcD6M/?ref=app

Answer 4

Krish this is excellent that you looked around the web for the answer. Why don't you ask there, what will be loaded with the button and maybe how?

Answer 5

No problem Prince it is not needed to delete it.

Answer 6

Can you explain your question more detailed, please?

Answer 7

As I above wrote Krish I think this is not possible. Why?
With css an image will be only formatted for display in browser. Thereby data of this image will be not changed.

Answer 8

Mike Perkowski
Spicoder
Mǟɖ↻ôɖɆⱤ💉
Programmer
Calviղ
Nova
Good_Bits
lolo
Aakaanksha 💕 [TheBloodCoders]

Plzz see if you can help me.

Answer 9

Aastha Rajput but the download button doesn't work.

Answer 10

https://code.sololearn.com/W1SBNAgl0wNS/?ref=app

Answer 11

Prince you have copied JaScript 's answer

Answer 12

Yes

Answer 13

Is this solved? If not I found the solution here.

Answer 14

@prince you're not the one with the question.

Answer 15

Prince Alright,
https://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser

Answer 16

Chris C. Your answer isn't what Krish is looking for. While that's useful to convert SVG to image formats, krish wants to create a downloadable file (image) from an HTML element and include the effects of CSS on that element in the image.

Answer 17

Mike Perkowski Convert to the format and the user can download the output as those file types. With a simple right click.

Answer 18

Chris C. Your solution doesn't include CSS filter effects and is only applicable to SVG elements.

Answer 19

Chris C. I took svg file because i thought it would look great. Its not the matter of the file type. My question is that an image of any type (png, jpeg, jpg.....) can be used to filter through css and finally making a download button for the result.

Mike Perkowski said correct.

Answer 20

Krish Thank you now I fully understand.

This will do the trick. There is also a demo at the bottom of the page that shows it in action. It allowed me to apply filters to the image and download the image applied with my filters.
https://www.sitepoint.com/manipulating-images-web-pages-camanjs/