ExtJS how to set icon of button to image in memory (not on disk)?

Question

Long story short in another portion of the program I make canvases, convert them to DataURLs, then pass them over to the following portion to use as the icon image of the buttons. Whenever I set this.icon = "/path/to/image.jpg", it pulls it correctly, but since these images are not on disk, I am unsure how to

arrowHandler: function (arrow) {
    var list = [];
    var library = Ext.getCmp("library");
    var buttons = Ext.getCmp("numbered").menu.buttons; //where the dataURLs are pushed in another portion of the program
    function btn(num) {
        var image = new Image;
        image.src = buttons[num].dataURL;
        this.xtype = "button";
        this.height = 50;
        this.width = 50;
        this.icon = image; //where putting an actual path works correctly, but this code doesn't
        this.num = num;
        this.handler = function (btn) {
            btn.up("button").menu.Style = this.num;
            btn.up("button").fireEvent("selected", this.num);
        };
    }
    for (var i = 0; i <= 0; i++)
        library.items.items.push(new btn(i));
},

I am aware the loop is only going thru index 0 - it's like that purposefully for testing.

SOLUTION

The selected correct answer did provide the right way to set the icon with a DataURI, but it wasn't the fix to my issue. Turns out instead of doing

library.items.items.push(new btn(i));

I needed to be doing

library.add(new btn(i));

The error I kept encountering with pushing was "c.render() is not a function". I mention that solely to make it hopefully searchable for anyone else who encounters that error.

Answer 1

Should be the same as data uri, you'll have to convert it first.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

var dataURL = canvas.toDataURL();

Here is a button fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1og6