我正在尝试将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>−</mo>" +
"<mi _moz-math-font-style='italic'>b</mi>" +
"<mo>±</mo>" +
"<msqrt>" +
"<mrow>" +
"<msup>" +
"<mi _moz-math-font-style='italic'>b</mi>" +
"<mn>2</mn>" +
"</msup>" +
"<mo>−</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,因此这是一个严重的障碍。任何帮助,将不胜感激。
最佳答案
从{type:“ image / svg + xml; charset = utf-8”}中删除“ charset = utf-8”
var svg = new Blob([data], {type: "image/svg+xml"});
关于javascript - 在Safari上在 Canvas 中渲染mathML失败。图像加载回调未触发,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/12789160/