Question

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

当我将鼠标悬停在空的img标记上时，出现错误“无法加载给定的网址”。

底部的图片是包含png数据的canvas标签。我应该以某种方式将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（）代码的generate img标记：

这是一个无法显示的img标记示例：

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

这是由canvas.toBlob（）生成的底部空白img标记：

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

Answer 1

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

所以在这一步：

override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    let cell = self.tableView.cellForRow(at: indexPath) as! CustomeCell
    if indexPath.row == 0 
        cell.btnImageView.image = UIImage.init(named: "screenr.png")
}

override func tableView(_ tableView: UITableView, didDeselectRowAt indexPath: IndexPath) {
    let cell = self.tableView.cellForRow(at: indexPath) as! CustomeCell
    if indexPath.row == 0
        cell.btnImageView.image = UIImage.init(named: "screen.png")
}

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

1 个答案: