Html5, make images 'downloadable'?

Hi, I’ve got ( probably ) a noob question about html5 and images,

I’m working on this web app ( https://mixit.updog.co ) where you can mix images together.

The app should allow the user to record and download resulting compositions, or at least allow right-clicking in the browser page to download / share / copy etc. - since we’re in a browser that shouldn’t be a problem, was I thinking!

Alas, my openFL html5 output doesn’t seem to permit it.

I’ve even tried the basic example DisplayingABitmap, same result.

Any clues?

I already used FileSaver.js with ExternalInterace.

1 Like

That’s gonna be helpful, thanks!

We should probably add support here

1 Like

Hi @loudo, how did you manage to make FileSaver.js work with your code?

I can’t seem to have FileDialog working in my browser ( Safari 10 )

FileDialog doesn’t work for html5. If anybody works on the feature, the feature should be added there.

I think you have to save from one canvas (using canvas.toBlob()). If your png isn’t made with your main canvas, you’ll probably need to render your image inside a canvas and then get the blob (I think it’s possible). Or maybe you can create directly a Blob like this.

You can also try to open an url with your png base64-encoded in it (but I think it will not work on IE).

I’ve managed to link FileSaver.js and canvas-toBlob.js in my project, now the problem is don’t know how to access a proper HTMLCanvasElement when i call for instance document.getElementById(‘openfl-content’), it returns an object of type HTMLDivElement ( naturally )

I instantiate bitmaps from openfl, do they translate somewhere in canvases? How do you access that from javascript?

I will look into creating a Blob directly as you mentioned, but it would be simpler to reference a canvas from within my document

Nevermind me, i managed to scan through the nodes within my document, find the canvas i’m interested in, and .toBlob it properly.

Thanks for your help!

Glad you did it! :sunglasses:

FileSaver doesn’t work well on some Safari browsers. It opens blob in new window and renames it to “unknown” without any file format. I had to use php instead and it works great so far.

I have the same issue. It’s not very elegant but the user can still change the name in the file dialog :frowning: