Search the Community
Showing results for tags 'adjustmentfilter'.
-
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 !