Fix: ScreenShot example broken #80

src/examples/v7.0.0/advanced/screenShot.js

@@ -5,19 +5,39 @@ const app = new PIXI.Application({ backgroundColor: '#111', resizeTo: window });
 document.body.appendChild(app.view);
 
 const texture = PIXI.Texture.from('https://pixijs.com/assets/bunny.png');
+const containerFrame = new PIXI.Container();
 const bunnyContainer = new PIXI.Container();
 
+let screenshot;
+
+// Take the screenshot and download it
 async function takeScreenshot()
 {
+    if (screenshot !== undefined)
+    {
+        screenshot.remove();
+    }
+
     app.stop();
-    const url = await app.renderer.extract.base64(bunnyContainer);
-    const a = document.createElement('a');
-
-    document.body.append(a);
-    a.download = 'screenshot';
-    a.href = url;
-    a.click();
-    a.remove();
+    const url = await app.renderer.extract.base64(containerFrame);
+
+    screenshot = document.createElement('a');
+
+    document.body.append(screenshot);
+
+    screenshot.style.position = 'fixed';
+    screenshot.style.top = '20px';
+    screenshot.style.right = '20px';
+    screenshot.download = 'screenshot';
+    screenshot.href = url;
+
+    const image = new Image();
+
+    image.width = app.screen.width / 5;
+    image.src = url;
+
+    screenshot.innerHTML = image.outerHTML;
+
     app.start();
 }
 
@@ -55,4 +75,5 @@ const screenshotText = new PIXI.Text('Click To Take Screenshot', style);
 screenshotText.x = Math.round((app.screen.width - screenshotText.width) / 2);
 screenshotText.y = Math.round(screenshotText.height / 2);
 
-app.stage.addChild(screenshotText, bunnyContainer);
+containerFrame.addChild(bunnyContainer);
+app.stage.addChild(screenshotText, containerFrame);

src/examples/v8.0.0/advanced/screenShot.js

@@ -11,52 +11,81 @@ import { Application, Assets, Container, Sprite, Text, TextStyle } from 'pixi.js
     // Append the application canvas to the document body
     document.body.appendChild(app.canvas);
 
-    // Load the bunny texture
-    const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
+    // Create and add a container to the stage
+    const container = new Container();
 
-    // Create and add a container for the bunnies
-    const bunnyContainer = new Container();
+    const containerFrame = new Container();
 
-    // Take the screenshot and download it
-    async function takeScreenshot()
-    {
-        app.stop();
-        const url = await app.renderer.extract.base64(bunnyContainer);
-        const a = document.createElement('a');
-
-        document.body.append(a);
-        a.download = 'screenshot';
-        a.href = url;
-        a.click();
-        a.remove();
-        app.start();
-    }
+    containerFrame.addChild(container);
 
-    app.stage.eventMode = 'static';
-    app.stage.hitArea = app.screen;
-    app.stage.on('pointerdown', takeScreenshot);
+    app.stage.addChild(containerFrame);
+
+    // Load the bunny texture
+    const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
 
+    // Create a 5x5 grid of bunnies in the container
     for (let i = 0; i < 25; i++)
     {
         const bunny = new Sprite(texture);
 
-        bunny.anchor.set(0.5);
         bunny.x = (i % 5) * 40;
         bunny.y = Math.floor(i / 5) * 40;
-        bunnyContainer.addChild(bunny);
+        container.addChild(bunny);
     }
 
-    bunnyContainer.x = 400;
-    bunnyContainer.y = 300;
-    bunnyContainer.pivot.x = bunnyContainer.width / 2;
-    bunnyContainer.pivot.y = bunnyContainer.height / 2;
+    // Move the container to the center
+    containerFrame.x = app.screen.width / 2;
+    containerFrame.y = app.screen.height / 2;
 
-    // Animate the bunnies container
+    // Center the bunny sprites in local container coordinates
+    container.pivot.x = container.width / 2;
+    container.pivot.y = container.height / 2;
+
+    // Listen for animate update
     app.ticker.add((time) =>
     {
-        bunnyContainer.rotation += 0.01 * time.deltaTime;
+        // Continuously rotate the container!
+        // * use delta to create frame-independent transform *
+        container.rotation -= 0.01 * time.deltaTime;
     });
 
+    let screenshot;
+
+    // Take the screenshot and download it
+    async function takeScreenshot()
+    {
+        if (screenshot !== undefined)
+        {
+            screenshot.remove();
+        }
+
+        app.stop();
+        const url = await app.renderer.extract.base64(containerFrame);
+
+        screenshot = document.createElement('a');
+
+        document.body.append(screenshot);
+
+        screenshot.style.position = 'fixed';
+        screenshot.style.top = '20px';
+        screenshot.style.right = '20px';
+        screenshot.download = 'screenshot';
+        screenshot.href = url;
+
+        const image = new Image();
+
+        image.width = app.screen.width / 5;
+        image.src = url;
+
+        screenshot.innerHTML = image.outerHTML;
+
+        app.start();
+    }
+
+    app.stage.eventMode = 'static';
+    app.stage.hitArea = app.screen;
+    app.stage.on('pointerdown', takeScreenshot);
+
     const style = new TextStyle({
         fontFamily: 'Roboto',
         fill: '#999',
@@ -67,5 +96,5 @@ import { Application, Assets, Container, Sprite, Text, TextStyle } from 'pixi.js
     screenshotText.x = Math.round((app.screen.width - screenshotText.width) / 2);
     screenshotText.y = Math.round(screenshotText.height / 2);
 
-    app.stage.addChild(screenshotText, bunnyContainer);
+    app.stage.addChild(screenshotText);
 })();