node icon indicating copy to clipboard operation
node copied to clipboard

write text set alpha will not right

Open lichspace opened this issue 1 year ago • 1 comments

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

lichspace avatar May 25 '23 13:05 lichspace

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

bigtimebuddy avatar Jan 03 '24 19:01 bigtimebuddy