Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

gaussian & transparency issue #613

Open
incanus opened this issue Oct 10, 2022 · 0 comments
Open

gaussian & transparency issue #613

incanus opened this issue Oct 10, 2022 · 0 comments

Comments

@incanus
Copy link
Contributor

incanus commented Oct 10, 2022

I'm not sure if I'm using things correctly, but I think I might have a bug in the way that the gaussian (as well as blur) filter works on transparent images.

Here is a test image pre-masked with text and then having the filter applied to the whole image:

output2

Left side is actually transparent and will show through GitHub page color.

Steps to create:

  1. Make a new 200x100 image
  2. Set every pixel transparent white
  3. Paint the right half fully opaque green
  4. Use a fully opaque mask (default for new image)
  5. Apply filter

I would expect that both texts would be blurred, but only the one with opacity is.

Am I using things wrong or is it a bug?

Code:

#!/usr/bin/env node

const { Image } = require('image-js');

async function test() {
    var image = new Image(200, 100);

    // set the whole image transparent white
    for (var x = 0; x < image.width; x++) {
      for (var y = 0; y < image.height; y++) {
        image.setPixelXY(x, y, [255, 255, 255, 0]);
      }
    }

    // paint the right half opaque green
    image = image.paintPolygon([
      [image.width / 2, 0],
      [image.width - 1, 0],
      [image.width - 1, image.height - 1],
      [image.width / 2, image.height - 1]
      ], {
        color: [0, 255, 0, 255],
        filled: true
      });

    mask = new Image(200, 100);

    const i = 2;

    image = image.paintMasks([mask, mask], {
      labels: ['r = ' + i, 'r = ' + i],
      labelsPosition: [[42, 55], [140, 55]],
      labelColor: 'black',
      labelFont: '12px Helvetica'
    });

    image = image.gaussianFilter({ radius: i });

    image.save('output' + i + '.png');
}

test();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant