How to trim the transparent pixels from an image and get the bounds from it

[velara3]

I'm trying to crop the transparent pixels out of an image to contain only it's contents and I started to do it manually and I figure there has to be a better way.

Here is what I have so far:

async crop() {
   try {
      (async() => {
         var app = new Application({backgroundAlpha: 0, resizeTo: window});
         var view = document.body;
         view.appendChild(app.view as HTMLCanvasElement);
         const texture = await Assets.load("imagewithpadding.png") as Texture;
         const container = new Container();
         const sprite = new Sprite(texture);
         sprite.anchor.set(.5);
         sprite.x = app.renderer.width / 2;
         sprite.y = app.renderer.height / 2;
         app.stage.addChild(sprite);
         var spritePixels = app.renderer.extract.pixels(sprite);
         var spriteImage = await app.renderer.extract.image(sprite) as HTMLImageElement;
         var data = spritePixels;
         var spriteWidth = sprite.width;
         var spriteHeight = sprite.height;
         var firstTopPixel = 0;
         var spritePixelLength = spritePixels.length; // >>2;

         var pixel = -1;
         var row = 0;
         var column = 0;
         spriteWidth = 10;
         spritePixelLength = 1000
         var boundingBox = getCanvasBoundingBox(sprite);

         var firstRowFound = false;
         var firstColumnFound = false;
         var firstRowWithContent = 0;
         var lastRowWithContent = 0;
         var firstColumnWithContent = 0;
         var lastColumnWithContent = 0;
         var pixel = -1;
         var row = 0;
         var column = 0;
         spriteWidth = 10;
         spritePixelLength = 1000;

         for(let i = 0; i < spritePixelLength; i += 4) {
            pixel++;
            const red = spritePixels[i];
            const green = spritePixels[i + 1];
            const blue = spritePixels[i + 2];
            const alpha = spritePixels[i + 3];
            row = Math.floor(pixel / spriteWidth);
            column = pixel - spriteWidth * row;
            console.log("row: "+ row + " col: " + column);
            
            // ROWS
            // get first top row with a pixel in it
            if (firstRowFound==false && alpha!=0){
               firstRowWithContent = row;
               firstRowFound = true;
            }
            
            // get last row with a content in it
            if (alpha!=0){
               lastColumnWithContent = row;
            }
            
            // COLUMNS
            // get first column with content in it
            if (firstColumnFound==false && alpha!=0){
               firstColumnWithContent = column;
               firstColumnFound = true;
            }
            
            // get last column with content in it
            if (alpha==0){
               lastColumnWithContent = column;
            }
         }

      })();
   }
   catch(error) {

   }
}

I've updated this answer a few times. The last update might work.

[bigtimebuddy]

Pixi has a built-in utility to do this called getCanvasBoundingBox. It is used to trim Text.

https://github.com/pixijs/pixijs/blob/dev/src/utils/canvas/getCanvasBoundingBox.ts

[velara3]

I'm testing it now but I get a message:

import { Application, 
   Assets,
   Sprite, 
   Texture,
   Container } from "./lib/pixi/pixi.mjs";
import * as PIXI from 'pixi.js';
import { getCanvasBoundingBox } from "./lib/pixi/pixi.mjs";

Uncaught SyntaxError: The requested module './lib/pixi/pixi.mjs' does not provide an export named 'getCanvasBoundingBox' 

Code:

         var boundingBox = app.view.getCanvasBoundingBox(sprite);

[velara3]

My guess is that these functions are not exported seeing that the other classes export easily. Or that it exists on a specific class (maybe the Text class?). I don't see it though on Sprite, Container, app.Canvas, Texture or Text.

[bigtimebuddy]

Here's an example: https://pixiplayground.com/#/edit/9wMF2lCHNQcqCLpRqY1sx

You want:

import { getCanvasBoundingBox } from 'pixi.js';

Or if using the browser global PIXI:

PIXI.getCanvasBoundingBox

[velara3]

I get errors with that:

import * as PIXI from "./lib/pixi/pixi.mjs";
var boundingBox = PIXI.getCanvasBoundingBox(app.view);
TypeError: PIXI.getCanvasBoundingBox is not a function

My vscode project is setup like so:

/(nodejs pages here)
/public/(web pages here)
/public/myproject.js
/public/myproject.ts
/public/mypage.html
/public/lib/pixi/pixijs.mjs /* copied the files here */
/node_modules/(modules here)

I moved the pixijs library from node_modules/pixi.js to a directory in the public folder because the browser says it can't find the files when using import { Application } from "pixi.js";