canvas.toBlob/toDataURL as Phaser Image

[quarks]

How do you take the output of either canvas.toBlob or canvas.toDataURL and use it as the bitmap for a Phaser Image object? It is not clear to me which of the myriad bitmap-like type in Phaser is relevant here.

Thanks.

[samme]

You can use the data URL with load.image() just like an HTTP URL. I don't know about blobs.

Is this canvas outside of Phaser?

[rich]

You can also use the actual canvas itself as a Sprite texture, if it's safe (re: CORS) and available. Saves creating an image from it.

[quarks]

13 minutes ago, samme said:

You can use the data URL with load.image() just like an HTTP URL. I don't know about blobs.

Is this canvas outside of Phaser?

No, the canvas is inside phaser. The idea to have a hotkey for screenshots that can be displayed later.

Ok, that works. It is necessary to call game.load.start() manually after queuing up the load. For reference, the code is basically this.
 

let dataurl = game.canvas.getDataURL();
game.load.image('screenshot_' + n, dataurl);
game.load.start();

I suppose doing this asynchronously makes sense given that even decoding the url might be (relatively) time consuming. But is there a synchronous way to add the data directly to the cache?

[samme]

I don't think so, as it's the browser's task that's asynchronous (usually). game.load is just waiting for that.

[spinnerbox]

I have been given a task with blobs in browser and i came up with a solution here

I had to convert MathML to an image. MathML is xml for maths. You can encode it with toDataUrl or with btoa and save it as text.

This would be your base64 string which can then be used to revert it back to MathML, with function atob

More about baser64 string here

I will post just the example code. Other stuff at the link

var canvasblobapp = (function (win, jq) {'use strict';
    return {
        pageReady: function () {
            var img = new Image(),
                canvas = document.getElementById('image'),
                canvas1 = document.getElementById('illustration'),
                ctx = canvas.getContext('2d'),
                ctx1 = canvas1.getContext('2d'),
                blob = null,
                base64String = "",
                imgTag = document.createElement("img"),
                imgTag1 = document.createElement("img");

            // draw the image
            img.src = 'img/jabolche.png';

            img.onload = function () {

                canvas.width = this.width;
                canvas.height = this.height;

                ctx.drawImage(img, 0, 0);

                base64String = canvas.toDataURL("image/png", 0.92);
                imgTag.src = base64String;
                imgTag.id = "newImage";
                window.document.getElementById('result').appendChild(imgTag);

            };

            // draw the cloud illustration
            ctx1.beginPath();
            ctx1.moveTo(170, 80);
            ctx1.bezierCurveTo(130, 100, 130, 150, 230, 150);
            ctx1.bezierCurveTo(250, 180, 320, 180, 340, 150);
            ctx1.bezierCurveTo(420, 150, 420, 120, 390, 100);
            ctx1.bezierCurveTo(430, 40, 370, 30, 340, 50);
            ctx1.bezierCurveTo(320, 5, 250, 20, 250, 50);
            ctx1.bezierCurveTo(200, 5, 150, 20, 170, 80);
            ctx1.closePath();
            ctx1.lineWidth = 5;
            ctx1.fillStyle = '#8ED6FF';
            ctx1.fill();
            ctx1.strokeStyle = '#0000ff';
            ctx1.stroke();

            imgTag1.src = canvas1.toDataURL("image/png", 0.92);
            imgTag1.id = "newIllustration";
            document.getElementById('result').appendChild(imgTag1);
        }
    };
}(window, $));

$(document).ready(canvasblobapp.pageReady);

In the example I load image object and onload i draw it in the canvas, plus I take the base64 string which when set as a src on and "image" tag displays your image, meaning, base64 represents an object in the browser memory which gets deleted when you close your browser.