canvas.toBlob/toDataURL as Phaser Image

Recommended Posts

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.


Share this post

Link to post
Share on other sites
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);

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?

Share this post

Link to post
Share on other sites

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";


            // draw the cloud illustration
            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.lineWidth = 5;
            ctx1.fillStyle = '#8ED6FF';
            ctx1.strokeStyle = '#0000ff';

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


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.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.