JSFiddle - React, Tailwind, and code Playground

by adil_invideo

HTML

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

JavaScript

class MySprite extends PIXI.Sprite {

  constructor(width, height, src) {
    let img = document.createElement("img");

    img.style.width = `${width}px`;
    img.style.height = `${height}px`;
   

    const texture = PIXI.Texture.from(img);
    super(texture);
    this.width = width;
    this.height = height;
    this.src = src;
    this.img = img;
    this.init();
  }

  init() {
    const tempApp = new PIXI.Application({
      width: this.width,
      height: this.height,
      backgroundColor: 0xCCCCCC,
      antialias: true,
      preserveDrawingBuffer: true
    });


    const sprite = PIXI.Sprite.from(this.src);
    sprite.height = this.height;
    sprite.width = this.width;
    tempApp.stage.addChild(sprite);

    const blurFilter = new PIXI.filters.BlurFilter();
    sprite.filters = [blurFilter];

    setTimeout(() => {
      this.img.src = tempApp.view.toDataURL();
    }, 100)
  }
}


const app = new PIXI.Application({
  width: 500,
  height: 500,
  backgroundColor: 0xCCCCCC,
  antialias: true,
});

document.body.appendChild(app.view);

const imgSrc = "https://d1efk3962q5p8g.cloudfront.net/480x480/_1607610227475.png";

const backSprite = new MySprite(400, 300, imgSrc);
const frontSprite = new MySprite(300, 300, imgSrc);

frontSprite.x = 50;


const container = new PIXI.Container();
app.stage.addChild(container);
container.addChild(backSprite);
container.addChild(frontSprite);




/* 
	1) Create a canvas of the given image size
  2) Use Pixi to draw the image on the canvas
  3) extract image from the canvas
  4) Set extracted image as SRc of MySprite
	
*/