在画布中渲染 mathML 在 Safari 上失败。图片加载回调未触发答案

【问题标题】：Rendering mathML in a canvas fails on Safari. Image load callback is not triggered在画布中渲染 mathML 在 Safari 上失败。图片加载回调未触发
【发布时间】：2012-10-08 20:42:30
【问题描述】：

我正在尝试将 mathML 渲染到 HTML5 画布中。迄今为止最好的 suggestion 是将 mathML 作为 SVG 外来对象嵌入，渲染成图像，然后将图像渲染到画布中。

问题是这种方法在 Firefox 中有效，但在 iPad 上失败。您可以在此处查看一些示例：

渲染mathML as SVG。适用于 Firefox 和 iPad。

渲染mathML in the canvas。适用于FF。在 iPad 上失败。

一个debug version of canvas rendering。绘图延迟到 mouseDown。这允许在 iPad 上使用firebug lite。

canvas.html 示例中的代码为：

<!DOCTYPE html>
<html lang="en">
  <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <title>Canvas Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
    <script type="text/javascript">

window.addEventListener('load', function () {
    var drawMath = function() {
    // Get the canvas element.
    var elem = document.getElementById('myCanvas');
    var ctx = elem.getContext("2d");
    var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
            "<foreignObject width='100%' height='100%'>" +
            "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:20px'>" +
        "<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>" +
        "<mrow>" +
        "<mi _moz-math-font-style='italic'>x</mi>" +
        "<mo>=</mo>" +
        "<mfrac>" +
        "<mrow>" +
        "<mo>&#x2212;</mo>" +
        "<mi _moz-math-font-style='italic'>b</mi>" +
        "<mo>&#xB1;</mo>" +
        "<msqrt>" +
        "<mrow>" +
        "<msup>" +
        "<mi _moz-math-font-style='italic'>b</mi>" +
        "<mn>2</mn>" +
        "</msup>" +
        "<mo>&#x2212;</mo>" +
        "<mn>4</mn>" +
        "<mi _moz-math-font-style='italic'>a</mi>" +
        "<mi _moz-math-font-style='italic'>c</mi>" +
        "</mrow>" +
        "</msqrt>" +
        "</mrow>" +
        "<mrow>" +
        "<mn>2</mn>" +
        "<mi _moz-math-font-style='italic'>a</mi>" +
        "</mrow>" +
        "</mfrac>" +
        "</mrow>" +
        "</math>" +
            "</div>" +
            "</foreignObject>" +
            "</svg>";
    var DOMURL = self.URL || self.webkitURL || self;
    mathimg = new Image();
    var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
    var url = DOMURL.createObjectURL(svg);
    mathimg.src = ""; // Trick from http://code.google.com/p/chromium/issues/detail?id=7731 (Didn't help)
    var drawImg = function() {
        ctx.drawImage(mathimg, 0, 0);
        DOMURL.revokeObjectURL(url);
    };
    mathimg.addEventListener("load", function(e) {
        drawImg();
    }, false);
    mathimg.src = url;
    };
    drawMath();
});
    </script>
  </head>

  <body>
    <canvas id="myCanvas">
      Render some math here
    </canvas>

  </body>
</html>

当您在 Firefox 中运行此代码时，将调用图像加载回调。在 iPad 上，加载没有被调用，也没有渲染。

我已经尝试了一些方法，包括 suggestion 在设置回调之前明确设置 image.src。

此外，用计时器（300 毫秒延迟）替换加载回调似乎没有帮助。代码得到执行但仍然没有渲染。由于我的目标平台是 iPad，这是一个严重的障碍。任何帮助将不胜感激。

【问题讨论】：

这是一款运行 iOS 6.0 的新（视网膜显示屏）iPad。

标签： javascript canvas svg mobile-safari mathml

【解决方案1】：

从 {type: "image/svg+xml;charset=utf-8"} 中删除 'charset=utf-8'

var svg = new Blob([data], {type: "image/svg+xml"});

【讨论】：