HTML5 download file

Hi,
I'm using godot to create a html5 app where users can manipulate sprites and download the result. But godot cannot access the user's local filesystem to save the resulting png image file.

I'm wondering if anyone has figured out a workaround using Javascript.eval()?


Tags :

Best Answer

  • TheMusketeerTheMusketeer Posts: 3
    edited September 2019 Accepted Answer

    Sure.
    Note: I am not a javascript expert.

    There is a way to do this by calling up the File Save As Dialog but I went with the easier download to default browser download location.

    Idea is to get godot button, on click, to start downloading file using JavaScript.eval().

    First create a temp <a> tag element.
    Set it's 'href' attribute to your data (format will depend on what you are serving the user).
    Set it's 'download' attribute to a default filename (for example, 'result.png')
    Append the temp <a> tag element to your html body
    Simulate click using <a> tag .click() method (this will start the download)
    Remove temp <a> tag element from html body (clean up)

    In my case, serving a png image makes it a bit more tricky since the image has to be converted to a base64 encoding.

    For this use the Marshalls Class (Marshalls.raw_to_base64()).

    But we cannot directly feed this the Image data since it includes OpenGL texture data and other metadata. So I went ahead and saved the image to the user:// path (this will save it to browser's indexedDB)
    Then load this image as File and feed that to .raw_to_base64()

Answers

  • TheMusketeerTheMusketeer Posts: 3Member

    Ignore this. I figured out a way using Javascript.

  • MegalomaniakMegalomaniak Posts: 2,897Admin

    Care to share? Someone else might end up looking for this information too. :)

  • TheMusketeerTheMusketeer Posts: 3Member
    edited September 2019 Accepted Answer

    Sure.
    Note: I am not a javascript expert.

    There is a way to do this by calling up the File Save As Dialog but I went with the easier download to default browser download location.

    Idea is to get godot button, on click, to start downloading file using JavaScript.eval().

    First create a temp <a> tag element.
    Set it's 'href' attribute to your data (format will depend on what you are serving the user).
    Set it's 'download' attribute to a default filename (for example, 'result.png')
    Append the temp <a> tag element to your html body
    Simulate click using <a> tag .click() method (this will start the download)
    Remove temp <a> tag element from html body (clean up)

    In my case, serving a png image makes it a bit more tricky since the image has to be converted to a base64 encoding.

    For this use the Marshalls Class (Marshalls.raw_to_base64()).

    But we cannot directly feed this the Image data since it includes OpenGL texture data and other metadata. So I went ahead and saved the image to the user:// path (this will save it to browser's indexedDB)
    Then load this image as File and feed that to .raw_to_base64()

Leave a Comment

BoldItalicStrikethroughOrdered listUnordered list
Emoji
Image
Align leftAlign centerAlign rightToggle HTML viewToggle full pageToggle lights
Drop image/file