Pixi.js: PIXI.Sprite.from() not working with base64 data URL

Created on 19 Nov 2019 · 3Comments · Source: pixijs/pixi.js

Expected Behavior

I'm attempting to insert an image into a Pixi canvas by using a base64 data URL string. I need to use that because the image is getting created from a camera feed (video tag).

Current Behavior

It works if I insert a regular image URL into the first argument of Sprite.from, but not when I use a base64 data URL.

Ex: https://codepen.io/gigamesh/pen/GRRzdrL?editors=1111

Is what I'm attempting even possible? If so, how?

Environment

pixi.js version: 5.1.2
Browser & Version: Chrome 78.0.3904.87
Running Example: https://codepen.io/gigamesh/pen/GRRzdrL?editors=1111

Source

gigamesh

Most helpful comment

here is the solution for anyone who finds this thread:

// img tag points to base64 URL
  const image = document.querySelector('img')
  const base = new PIXI.BaseTexture(image);
  const texture = new PIXI.Texture(base);
  const sprite = new PIXI.Sprite(texture);

https://codepen.io/Slaz/pen/bGGzxPw?editors=1111

gigamesh on 25 Nov 2019

❤1 🎉1 👍1

All 3 comments

data:image/gif - not possible. You need your own gif decoder. I had it somewhere...

ivanpopelyshev on 20 Nov 2019

You can pass video element direct to Texture constructor (from call it)

eXponenta on 20 Nov 2019

here is the solution for anyone who finds this thread:

// img tag points to base64 URL
  const image = document.querySelector('img')
  const base = new PIXI.BaseTexture(image);
  const texture = new PIXI.Texture(base);
  const sprite = new PIXI.Sprite(texture);

https://codepen.io/Slaz/pen/bGGzxPw?editors=1111

gigamesh on 25 Nov 2019

❤1 🎉1 👍1

Was this page helpful?

0 / 5 - 0 ratings