WyllisMonteiro

Bug during export of filtered canvas

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 !

Share this post


Link to post
Share on other sites

I tried code bellow but it changes nothing. I tried filter KawaseBlurFilter which works well but if I put a mask I got this error with all filters. I think mask cause this bug.

I also look MAC version, it's OS X Yosemite version 10.10.2.

Is there a minimum version of MAC device for using PIXI

 

Share this post


Link to post
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.

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.