Pixi.js: base64 데이터 URL과 함께 작동하지 않는 PIXI.Sprite.from()

에 만든 2019년 11월 19일 · 3코멘트 · 출처: pixijs/pixi.js

예상되는 동작

base64 데이터 URL 문자열을 사용하여 이미지를 Pixi 캔버스에 삽입하려고 합니다. 이미지가 카메라 피드(비디오 태그)에서 생성되기 때문에 사용해야 합니다.

현재 행동

Sprite.from 의 첫 번째 인수에 일반 이미지 URL을 삽입하면 작동하지만 base64 데이터 URL을 사용할 때는 작동하지 않습니다.

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

내가 시도하는 것이 가능한가? 그렇다면 어떻게?

환경

pixi.js 버전 : 5.1.2
브라우저 및 버전 : 크롬 78.0.3904.87
실행 예 : https://codepen.io/gigamesh/pen/GRRzdrL?editors=1111

출처

gigamesh

가장 유용한 댓글

이 스레드를 찾는 사람을 위한 솔루션은 다음과 같습니다.

// 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 에 2019년 11월 25일

❤1 🎉1 👍1

모든 3 댓글

data:image/gif - 불가능합니다. 자신의 gif 디코더가 필요합니다. 어디선가 가지고 있었는데...

ivanpopelyshev 에 2019년 11월 20일

텍스처 생성자에 직접 비디오 요소를 전달할 수 있습니다( from 호출).

eXponenta 에 2019년 11월 20일