base64 images aren't rendered by pixi sprite

[foxyblocks]

I'm trying to get pixi-shim working with images. I'm following the example from the project specs and it will render the pixi canvas correctly but it doesn't show the image from the sprite. Am I missing something? How can I render the canvas as an image?

Dependency versions:

• pixi-shim: ^2.3.7
• canvas: ^2.8.0
• pixi.js-legacy: 6.0.0

const PIXI = require('pixi-shim/pixi.js');
const bunny =
  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAlCAYAAABcZvm2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWNJREFUeNrsV8sNwjAMbUqBBWACxB2pQ8AKcGALTsAJuDEFB1gBhuDAuWICmICPQh01pXWdJqEFcaglRGRbfonjPLuMc+5QwhjLGEJfZusjxZOL9akZKye9G98vPMfvsAx4qBfKwfzBL9s6uUHpI6U/u7+BKGkNb/H6umtk7MczF0HyfKS4zo/k/4AgTV8DOizrqX8oECgC+MGa8lGJp9sJDiAB8nyqYoglvJOPbP97IqoATGxWVZeXJlMQwYHA3piF8wJIblOVNBBxe3TPMLoHIKtxrbS7AAbBrA4Y5NaPAXf8LjN6wKZ0RaZOnlAFZnuXInVR4FTE6eYp0olPhhshtXsAwY3PquoAJNkIY33U7HTs7hYBwV24ItUKqDwgKF3VzAZ6k8HF+B1BMF8xRJbeJoqMXHZAAQ1kwoluURCdzepEugGEImBrIADB7I4lyfbJLlw92FKE6b5hVd+ktv4vAQYASMWxvlAAvcsAAAAASUVORK5CYII=';
const image = document.createElement('img');

image.src = bunny;

const app = new PIXI.Application({ backgroundColor: 0x1099bb, preserveDrawingBuffer: true });
const sprite = PIXI.Sprite.from(image.src);

app.stage.addChild(sprite);
app.render();

const base64 = app.view.toDataURL('image/png', 1).replace(/^data:image\/png;base64,/, '');

require('fs').writeFile('test.png', base64, 'base64', (err) => {
  console.log(err);
});

[Prozi]

i am aware, was fighting with this just now.

pixi doesnt seem to render() the children of stage that are properly loaded pixi sprites

see https://github.com/Prozi/pixi-shim/blob/master/pixi.spec.js

const bunny =
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAlCAYAAABcZvm2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWNJREFUeNrsV8sNwjAMbUqBBWACxB2pQ8AKcGALTsAJuDEFB1gBhuDAuWICmICPQh01pXWdJqEFcaglRGRbfonjPLuMc+5QwhjLGEJfZusjxZOL9akZKye9G98vPMfvsAx4qBfKwfzBL9s6uUHpI6U/u7+BKGkNb/H6umtk7MczF0HyfKS4zo/k/4AgTV8DOizrqX8oECgC+MGa8lGJp9sJDiAB8nyqYoglvJOPbP97IqoATGxWVZeXJlMQwYHA3piF8wJIblOVNBBxe3TPMLoHIKtxrbS7AAbBrA4Y5NaPAXf8LjN6wKZ0RaZOnlAFZnuXInVR4FTE6eYp0olPhhshtXsAwY3PquoAJNkIY33U7HTs7hYBwV24ItUKqDwgKF3VzAZ6k8HF+B1BMF8xRJbeJoqMXHZAAQ1kwoluURCdzepEugGEImBrIADB7I4lyfbJLlw92FKE6b5hVd+ktv4vAQYASMWxvlAAvcsAAAAASUVORK5CYII=";

// just parameterless proxy
async function createImage() {
  return await loadImage(bunny);
}

// this is how to create sprite for toDataURL
async function createSprite(base64) {
  const PIXI = require("./pixi");
  const image = await createImage(base64);
  const buffer = Buffer.from(image.src, "base64");
  const baseTexture = PIXI.BaseTexture.fromBuffer(
    buffer,
    image.width,
    image.height
  );
  const texture = new PIXI.Texture(baseTexture);

  return new PIXI.Sprite(texture);
}

[Prozi]

cc @foxyblocks

[Prozi]

closing as working and tested (with simple sprites)

a bit hackish but works, see:

https://github.com/Prozi/pixi-shim/blob/master/pixi.spec.js https://github.com/Prozi/pixi-shim/blob/master/to-data-url.js