使用 JavaScript 将 png 图像转换为 blob 图像？

Question

我无法显示由包含 "png" 二进制数据的 canvas 标签生成的图像标签。我希望能够在 TinyMCE 编辑器中显示这个新图像，以便我可以使用 FMath 插件对其进行编辑。

当我将鼠标悬停在空的 img 标签上时，出现错误 "Failed to load the given URL"。

底部的图像是我的 canvas 标签，其中包含 png 数据。我应该以某种方式将该 png 数据传输到带有 blob 地址的 img 标签，以便我可以使用 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's 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() 两种方法。但两者都会生成空白图像。

我做错了什么？有什么想法吗？

下图显示了使用 toBlob() 代码生成 img 标签：

这是无法显示的 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">

Answer 1

您正试图在图像加载尚未完成时获取 blob。基本上你需要等待图像加载，然后才能继续捕获 blob（异步）。

所以在这一步中：

img.onload = function () {
   canvas.width = this.width;
   canvas.height = this.height;
   ctx.drawImage(img, 0, 0);
   // YOU SHOULD PROCESS / CALLBACK IT HERE
};
// HERE IS WHERE YOU DO IT AS OF NOW

使用 JavaScript 将 png 图像转换为 blob 图像？

Convert png image to blob image with JavaScript?

javascript

base64

tinymce

canvas

image