Can i download an image created in a web game?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By RafaelGomes

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:

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.

:bust_in_silhouette: Reply From: klaas

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

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

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.

RafaelGomes | 2021-07-23 15:54

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:

Exporting for the Web — Godot Engine (stable) documentation in English

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

klaas | 2021-07-23 20:34

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)

RafaelGomes | 2021-07-24 15:23

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

klaas | 2021-07-24 16:23

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?

RafaelGomes | 2021-07-24 18:17

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(); 
"

klaas | 2021-07-24 18:24

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

Thank you for your time and patience.

RafaelGomes | 2021-07-24 18:33

:bust_in_silhouette: Reply From: kitfox

There is a simpler way to solve this. Calling JavaScriptBridge.download_buffer() lets you pack your file into a buffer and kicks off the download without having to mess with Javascript expressions.

https://forum.godotengine.org/104093/how-can-i-save-an-image-to-the-users-filesystem-in-a-web-export