Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

canvas.toBlob/toDataURL as Phaser Image


Recommended Posts

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?

Link to comment
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.

Link to comment
Share on other sites


  • Recently Browsing   0 members

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