Конвертировать PNG-изображение в BLOB-изображение с помощью JavaScript?

Я не могу показать свой тег изображения, сгенерированный тегом canvas, который содержит двоичные данные png. Я хочу, чтобы иметь возможность отображать это новое изображение в редакторе TinyMCE, поэтому я могу редактировать его с помощью плагина FMath.

Когда я нахожу над тегом img, который пуст, я получаю сообщение об ошибке "Не удалось загрузить данный URL".

Изображение внизу - мой тег canvas, содержащий данные png. Мне нужно каким-то образом передать эти данные png в img-тег с адресом blob, чтобы я мог редактировать его с помощью редактора FMath:

Код, который я использую, следующий:

var tinymceapp = (function (jq, tmce) {'use strict';
    var canvas = null,
        ctx = null,
        base64String = "",
        img = null,
        blob = null;

    return {
        pageReady: function () {
            tmce.init({
                selector: '#editor',
                height: 500,
                theme: 'modern',
                plugins: [
                    'other plugins FMathEditor'
                ],
                toolbar1: 'toolbar 1 buttons',
                toolbar2: 'toolbar 2 buttons | FMathEditor',

                init_instance_callback : function(editor) {
                    img = new Image();
                    canvas = document.getElementById('canvas');
                    ctx = canvas.getContext('2d');

                    img.onload = function () {
                       canvas.width = this.width;
                       canvas.height = this.height;
                       ctx.drawImage(img, 0, 0);
                    };

                    img.src = 'img/math.png';

                    base64String = canvas.toDataURL('image/png', 1.0);

                    blob = canvas.toBlob(function (blob) {
                        var newImg = document.createElement('img'),
                        url = window.URL.createObjectURL(blob);
                        console.log(url);
                        newImg.onload = function() {
                            // no longer need to read the blob so it revoked
                            window.URL.revokeObjectURL(url);
                        };

                        newImg.src = url;
                        document.body.appendChild(newImg);
                    }, 'image/png', 1.0);

                    tmce.activeEditor.insertContent('<img alt="MathML (base64):' + base64String.substring(22, base64String.length) + '" src="' + base64String + '"/>');

                }
            });
        }
    };
}($, tinymce));

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

Я пробовал оба подхода с Canvas.toDataUrl() и с Canvas.toBlob(). Но оба создают пустой образ.

Что я делаю неправильно? Есть идеи?

На приведенном ниже рисунке показано генерирование тега img с помощью кода toBlob():

Это пример img-тега, который не может быть отображен:

<img src="blob:http://localhost:8081/9fd2d43d-3b7f-42cd-a50d-161263d70c55" alt="MathML (base64):iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII=" data-mce-selected="1">

Это нижний пустой тег img, созданный canvas.toBlob():

<img src="blob:http://localhost:8081/eede9470-3728-4031-8c58-9c29a4c8979f">