Can i download an image created in a web game?

Question

I'm taking a screenshot of the game, at a certain moment, and i want to allow the player to download this image, is that possible? (in a web game).

I asked this same question on discord and received this link:
https://godotengine.org/article/godot-web-progress-report-9
thanks to @Juulpower.

but this don't seem to have any answer or anything like that, could i make something like that? I'm limited to not using a separate host of the game itself.

Answer 1

Hi,
i would try convert the image to a dataurl.

https://en.wikipedia.org/wiki/Data_URI_scheme

This is basicly a base64 encoded version of the image file and hand it over to javascript
https://docs.godotengine.org/en/stable/classe/class_javascript.html?highlight=javascript
Javascript can then build a link and click it

//javascript function in the website
function download(dataurl, filename) {
  var a = document.createElement("a");
  a.href = dataurl;
  a.setAttribute("download", filename);
  a.click();
}

download("data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="", "nameOfTheFile.jpg"); //<-- this must be called from godot

Comments

Hey, thank you for your answer, but this godot docs link is unavailable.
Do you know how i could link javascript with godot? For example, i need an especific config? or only a script is enough, i have to create a reference? this kind of thing.

---

im sorry ... here is the link again:

https://docs.godotengine.org/en/stable/classes/class_javascript.html?highlight=javascript

how i could link javascript with godot?

This is the Javascript tuorial for godot:

https://docs.godotengine.org/en/stable/getting_started/workflow/export/exporting_for_web.html#calling-javascript-from-script

you may want to experiment a bit with godot to javascript workings

---

Hello again, so i tried what you suggested, by reading those links i learned about Javascript.eval(), but i don't get any response of the server using the code you said, if i place an alert of some kind, it works, but only that.

var file = File.new()
file.open("res://screenshot.png", File.READ)
var base_64_data = Marshalls.raw_to_base64(file.get_buffer(file.get_len()))
var url = base_64_data
var comand = """
    var a = document.createElement("a"); 
    a.href = """ + url + """; 
    a.setAttribute("download" , screenshot);
    a.click(); 
    """

JavaScript.eval(comand, true)

---

Check the javascript console of your browser ... any error there?
Do some console.log() messages into your javascript to debug the code.
Maybe the the scope is wrong and you cant reach the document object.

... and check your dataturl ... i think ist missing the mimetype and encoding ... look up dataurl in google

---

I figured out, it was indeed an error that was ocorring, but was how i was trying to pass the base64 from godot to javascript, is was in this line:

a.href = """ + url + """; 

but, now i can't send the data to javascript, i can't find how to do it on internet, do you know how to pass this information?

---

the encoding trashes your posting

you also can use single quotes in javascript

var url = "data:image/jpg;base64,"+base_64_data #dont forget the mimetype and encoding
var comand = "
    var a = document.createElement('a'); 
    a.href = '" + url + "';  //<---- single qoutes and double quotes
    a.setAttribute( 'download' , 'filename.jpg' );
    a.click(); 
"

---

That worked exactly how i wanted.
Thank you very much! :D

Thank you for your time and patience.