Saving PIXI content to Image
Guys,
We recently have new requirement that we need to save the content we rendered with pixi.js to image file like PNG.
The canvas's toDataURL method worked well at first, however we need more than that.
The content (a diagram) could be zoomed and the canvas only shows part of that diagram at the time we save the image.
Also, if we zoom out and try to capture the whole diagram, the output diagram seems not so crisp, or sharp. Hope I've made my self clear.
So, my
function download_sprite_as_png(renderer, sprite, fileName) {
renderer.extract.canvas(sprite).toBlob(function(b){
var a = document.createElement('a');
document.body.append(a);
a.download = fileName;
a.href = URL.createObjectURL(b);
a.click();
a.remove();
}, 'image/png');
}
Assuming you have instance of PIXI.Application in variable app, you can call the function using app.renderer as the first argument.
Tested in google-chrome on linux.
HTH
