I have to use filter of pixi js like AdjustmentFilter. I got an issue with MAC, I initailised canvas, then I put effects when canvas is loaded. After adding green in filter variable I tied to export my canvas. I got a bad image as you can see bellow
// Basic image
// Exported canvas
//Some code
var W = window.innerWidth
$(document).ready(function() {
const app = new PIXI.Application({
width: W,
height: W / 2
});
document.body.appendChild(app.view);
// Inner radius of the circle
const radius = 100;
// The blur amount
const blurSize = 32;
app.loader.add('grass', 'grass.jpeg');
app.loader.load(setup);
function setup(loader, resources) {
var containerBG = new PIXI.Container()
var containerBlur = new PIXI.Container()
app.stage.addChild(containerBG);
app.stage.addChild(containerBlur);
const background2 = new PIXI.Sprite(resources.grass.texture);
app.stage.addChild(background2);
background2.width = W;
background2.height = W / 2;
containerBG.addChild(background2);
var filter3 = new KawaseBlurFilter()
filter3.blur = 12
filter3.quality = 5
var filter4 = new AdjustmentFilter()
filter4.green = 5
const background = new PIXI.Sprite(resources.grass.texture);
background.width = W;
background.height = W / 2;
containerBG.addChild(background);
background.filters = [filter4]
var circle = new PIXI.Graphics()
.beginFill(0xFF0000)
.drawCircle(500, 500, radius)
.endFill();
containerBlur.addChild(circle)
background.mask = containerBlur;
var exportCanvas = app.renderer.plugins.extract.canvas(containerBG)
console.log(exportCanvas.toDataURL("image/jpeg"))
app.stage.interactive = true;
app.stage.on('mousemove', pointerMove);
}
})
If you need more details, I can gie you more, thank you in advance !
