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

write text set alpha will not right #3

Open
lichspace opened this issue May 25, 2023 · 1 comment
Open

write text set alpha will not right #3

lichspace opened this issue May 25, 2023 · 1 comment

Comments

@lichspace
Copy link

image

this font color is #fff

const { writeFileSync } = require('fs');
const { Application, Text } = require('@pixi/node');
const Jimp = require('jimp');

const app = new Application({
  width: 500,
  height: 300,
  backgroundAlpha: 0,
  antialias: true,
  preserveDrawingBuffer: true,
  premultipliedAlpha: false,
});

const main = async () => {
  const instance = new Text('星星之火\n可以燎原', {
    align: 'right',
    fontSize: 80,
    fill: '#fff',
    fontFamily: 'SimHei',
  });

  instance.x = 30;
  instance.y = 30;
  instance.alpha = 0.8;

  app.stage.addChild(instance);
  app.renderer.render(app.stage);
  console.log(instance.canvas);
  const buffer = app.view.toBuffer('raw');

  // writeFileSync('./tmp/pixi.png', app.view.toBuffer('image/png');

  new Jimp({ data: buffer, width: 500, height: 300 }, (err, image) => {
    console.log(err, image.hasAlpha());

    image.scan(0, 0, 500, 300, function (x, y, idx) {
      // x, y is the position of this pixel on the image
      // idx is the position start position of this rgba tuple in the bitmap Buffer
      // this is the image
    
      var red = this.bitmap.data[idx + 0];
      var green = this.bitmap.data[idx + 1];
      var blue = this.bitmap.data[idx + 2];
      var alpha = this.bitmap.data[idx + 3];

      console.log(red, green, blue, alpha / 255);
    
      // rgba values run from 0 - 255
      // e.g. this.bitmap.data[idx] = 0; // removes red from this pixel
    });

    image.quality(100).write('./tmp/jimp.png');
  });
  // 用完销毁
  // process.exit(0);
};

main();

result

0 0 0 0
0 0 0 0
0 0 0 0.01568627450980392
94 94 94 0.6078431372549019
163 163 163 0.8
163 163 163 0.8
163 163 163 0.8
163 163 163 0.8
163 163 163 0.8
163 163 163 0.8
146 146 146 0.7568627450980392
1 1 1 0.08235294117647059
0 0 0 0
0 0 0 0
0 0 0 0
@bigtimebuddy
Copy link
Member

As a workaround, I did this:

const instance = new Text('星星之火\n可以燎原', {
    align: 'right',
    fontSize: 80,
    // bake the alpha into the fill
    fill: 'rgba(255, 255, 255, 0.8)', // '#fff',
    fontFamily: 'SimHei',
});
 
instance.x = 30;
instance.y = 30;
//   instance.alpha = 0.8; 

// Declare the texture to be pma
instance.texture.baseTexture.alphaMode = ALPHA_MODES.PREMULTIPLIED_ALPHA;

Gave me this image result:

output

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

2 participants