HTML5 Canvas - Download image from game

[inespa]

Hi

This is a follow up question to this post, now that I've had an oportunity to come back and improve on it - How do i save my game's ending as image?

I've been trying to find an alternative to "document.body.appendChild(image);" as means to save an image of the game I made - appending a link seems a bit low key, and may pass unnoticed (specially since the game is aimed at children).

Opening the image on a new tab/window using "window.open" won't work in Chrome, so that's useless as well - it would have been a great option!

I wonder if there is another way to do this.

- is there a way to trigger a "save image as" window so the user can do it?)

- or can i make this link appear inside the game attached to an object (maybe an image appears with "click here for image" so the user can right click to save...?)

- some other way people with more know how would know....

Thank you!

[kglad]

you can use anything that involves user interaction to trigger aTag.click() without adding aTag to the display and without assigning any visible content to aTag.

[inespa]

Right, so I could trigger the save as "click" with the same function that creates the image.

But just «aTag.click()» won't work, and neither does «document.getElementById("a").click();» - maybe I'm missing something?

I'd be really grateful if you could help me with this

[kglad · Accepted solution]

var aTag = document.createElement('a');

aTag.setAttribute('href', canvas.toDataURL("image/png"));

aTag.download = "YourScreenshot.png";

this.btn.addEventListener('click',f.bind(this));

function f(){

aTag.click();

}

[inespa]

Hey, sorry for the delay (i got sick and only now got the chance to try this)

Thanks! I tried a few diferent ways to implement this, but it took me awhile to realise that it does indeed work, but only in chrome....?

It's suposed to work in all browsers, right? I don't know why it's not. (console log shows the event click, but nothing happens - in IE, Edge, and Firefox - only in chrome it works)

var hiddenCanvas = document.createElement('canvas');

hiddenCanvas.width = canvas.width * 0.388;

hiddenCanvas.height = canvas.height;

var canvasContext = hiddenCanvas.getContext('2d');

canvasContext.drawImage(

    canvas,

    0,

    0,

    canvas.width * 0.388,

    canvas.height,

    0,

    0,

    canvas.width * 0.388,

    canvas.height);

var aTag = document.createElement('a');

aTag.setAttribute('href', hiddenCanvas.toDataURL("image/png"));

aTag.download = "ONV_oTeuDoutor.png";

this.saveimg2.addEventListener('click', salvarimagem2.bind(this));

function salvarimagem2() {

    console.log("salvar imagem");

    aTag.click();

}

[kglad]

use:

function f(){

var evt = document.createEvent("MouseEvents");

evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

var allowDefault = aTag.dispatchEvent(evt);

}

[inespa]

Somehow, that doesn't work with IE and Edge. (in edge you can clearly see something happening - the icon in the tab turns into a loader gif as if preparing the image - but then it stops and doesn't do anything else)

[kglad]

i don't see ie or edge working with a click on the anchor link so it's not going to work trying to simulate a click.

[inespa]

Ah, ok. I'll try to find a fix for them then.

Thank you so much!

[kglad]

you're welcome.