Jump to content

Bug during export of filtered canvas


WyllisMonteiro
 Share

Recommended Posts

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

SLy9W.png

// Exported canvas

6if1e.jpg

//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 !

Link to comment
Share on other sites

Maybe readPixels() doesnt work good on surfaces that are bigger than screen.

Usually it creates renderTexture with size of container you passed there, not the screen size. Lets unwrap canvas() and create/destroy renderTexture of appropriate size.

var renderTexture = PIXI.RenderTexture.create({ width: app.screen.width, height: app.screen.height, resolution: app.renderer.resolution });
app.renderer.render(containerBG, renderTexture);
var exportCanvas = app.renderer.plugins.extract.canvas(renderTexture);
renderTexture.destroy(true);

As in all other threads like that, I recommend to look inside "Extract" module if something goes wrong. That code is not difficult and you can make some of actions in your own code than relying on it.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...