InPlace Crop : Stage 2 - using a custom shape

Demonstration of cropping based on a shape

by adil_invideo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>

JavaScript

const imageSrc = "https://s3.ap-south-1.amazonaws.com/republic-invideo/dog_1603357231987.png";
const maskSrc="https://s3.ap-south-1.amazonaws.com/invideo-block-assets/Template_Block_Assets/EXPRESSIONS/Memphis_Cross_Rounded.png";
const app = new PIXI.Application({
  width: 600,
  height: 400,
  transparent: true
});

document.body.appendChild(app.view);

const maskWidth = 0;
const maskHeight = 0;

const container = new PIXI.Container();
container.width = app.screen.width;
container.height = app.screen.height;

const sprite = PIXI.Sprite.fromImage(imageSrc);
sprite.width = app.screen.width;
sprite.height = app.screen.height;

const mask1 = PIXI.Sprite.fromImage(maskSrc);
mask1.width = 300;
mask1.height = 300;
mask1.x = 100;

container.addChild(sprite);
app.stage.addChild(container);


sprite.mask = mask1;

let tempWidth = 0;
let tempHeight = 0;