Pixi.js: PIXI.Sprite.from () no funciona con la URL de datos base64

Creado en 19 nov. 2019 · 3Comentarios · Fuente: pixijs/pixi.js

Comportamiento esperado

Estoy intentando insertar una imagen en un lienzo de Pixi usando una cadena de URL de datos base64. Necesito usar eso porque la imagen se crea a partir de una transmisión de cámara (etiqueta de video).

Comportamiento actual

Funciona si inserto una URL de imagen normal en el primer argumento de Sprite.from , pero no cuando uso una URL de datos base64.

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

¿Es posible lo que estoy intentando? ¿Si es así, cómo?

Ambiente

pixi.js versión : 5.1.2
Navegador y versión : Chrome 78.0.3904.87
Ejemplo de ejecución : https://codepen.io/gigamesh/pen/GRRzdrL?editors=1111

Fuente

gigamesh

Comentario más útil

aquí está la solución para cualquiera que encuentre este hilo:

// 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 en 25 nov. 2019

❤1 🎉1 👍1

Todos 3 comentarios

data:image/gif - no es posible. Necesitas tu propio decodificador gif. Lo tenía en alguna parte ...

ivanpopelyshev en 20 nov. 2019

Puede pasar el elemento de video directamente al constructor de texturas ( from llamarlo)

eXponenta en 20 nov. 2019

aquí está la solución para cualquiera que encuentre este hilo:

// 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 en 25 nov. 2019

❤1 🎉1 👍1

¿Fue útil esta página

0 / 5 - 0 calificaciones