Jump to content

Can a html <img> use a Pixi Texture object?


Recommended Posts

I know that a texture can be loaded from the website's assets (e.g: "/foo.png"). Is it possible to do something like this:

let texture = (some texture from Pixi)

document.body.appendChild(<img width=420 height=420 src=texture>);

Can a html element use a pixi texture?

Link to comment
Share on other sites

You'd want to render the texture to another canvas and append that to the body. Or if you really have to use an image you could render the texture to an off screen canvas, then use canvas toDataUrl to get it into an image element


You assign the output of canvas toDataUrl as the image src

Link to comment
Share on other sites

I've been a slightly different variant: using a PIXI.Sprite (which has additional content) as an image source

var imgSRC = renderer.extract.canvas(mySprite).toDataURL('image/png'); 

var img = document.createElement('IMG');

img.src = imgSRC;
img.style.width = '100%';
img.style.height = 'auto';


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...