Can not download canvas as image

I am using following code to download Play canvas as image but I am getting blank image so, anyone please guide me what is the wrong with this code.

var app = pc.Application.getApplication();
var canvas = app.graphicsDevice.canvas;
canvas.toBlob(function(blob) {
var imgSrc = URL.createObjectURL(blob);
var link = document.createElement(‘a’);
link.download = “myScreenshot.png”;
link.href = imgSrc;
link.click();
});

Thanks in advance.

Hi @Lr_Test_Demo,

I am not sure getting a blob from the canvas will work to grab an image.

Here is an easy way to do what you are trying to do, tested on Chrome:

    // on init
    var linkElement = document.createElement('a');
    linkElement.id = 'link';
    window.document.body.appendChild(linkElement);

    // download method
    var image = this.app.graphicsDevice.canvas.toDataURL('image/png');
    var link = document.getElementById('link');
    link.setAttribute('download', 'image.png');
    link.setAttribute('href', image.replace("image/png", "image/octet-stream"));
    link.click();    

Hi Leonidas,

Thanks for reply but I have tried this too but no luck :worried:

Try posting then a sample project to take a look why it’s not working for you.

Hi Leonidas,
can you please give me your Skype Id?

Sorry @Lr_Test_Demo I am not available on Skype. If you can’t post your project due to being private, you can add me with my playcanvas username for a while (leonidas).

Hi Leonidas,
This is my Skype Id mitesh.lr so, can we discuss there?

@Lr_Test_Demo you are best off creating a smaller project that you can share which will allow other forums users to help you.

1 Like

Why not add @Leonidas to the project or PM him a link to it?

1 Like