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

【问题标题】：Convert png image to blob image with JavaScript?使用 JavaScript 将 png 图像转换为 blob 图像？
【发布时间】：2017-11-13 04:33:33
【问题描述】：

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

当我将鼠标悬停在空白的 img 标签上时，我收到错误“无法加载给定的 URL”。

底部的图像是我的包含 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">

【问题讨论】：

任何有效的网址？

标签： javascript image canvas base64 tinymce

【解决方案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

【讨论】：