2017年06月18日

数式の画像生成 〜流行に乗ってみる〜

応援クリックを1日1回宜しくお願いいたします。



[2017年6月28日更新]
数式を画像化するアプリケーションを作成しました。
↓↓↓
数式の画像生成

数式の表示方法としてMathJaxを利用しています。

そのため$\mathrm{\TeX}$、MathML、Asciimathが利用可能です。




手順としては、数式(表示のためのプログラミング言語のソースコード)を入力した後で、「画像生成」ボタンをクリックします。

すると、数式が表示され「画像ダウンロード」のリンクが有効化しますので、それをクリックするとダウンロードします。



アプリケーションの事情的に、画像の横幅はMathJaxで表示された数式の横幅となります。

すなわち、数式の前後に普通の文章を書くと、一番横幅の長い数式の長さで改行されます。

このように設定した理由は、数式だけを記述した場合の横幅は数式の横幅としたかったためです。

ブラウザの横幅の分の白い領域が広がっていると数式の画像として使いにくそうと思います。







ソースコードの説明

当ブログではドルマーク($)は文章中の数式としてレンダリングの対象となるため、下記のソースコードではjQueryと表記しています。

// メイン
// 数式の表示領域(idはMathPreview)にtextareaの文字列を表示する
jQuery("#MathPreview").html(jQuery("#MathInput").val());
// 数式を通常の3倍に拡大する
MathJax.Hub.Config({"HTML-CSS":{scale:300}});
// 数式の表示領域を数式レンダリングする
MathJax.Hub.Queue(["Typeset", MathJax.Hub, "MathPreview"]);
// 数式レンダリングが完了したら、キャプチャにうつる(0.5秒待ったあとで)
MathJax.Callback.Queue([setTimeout(saveImage, 500), ]);
}

function saveImage() {
// 「少々お待ちください。」と表示する
jQuery("").attr("id", "imageMessage").css("font-size", "30px").html("

 少々お待ちください。")
.insertBefore("#MathPreview");

jQuery("#MathPreview").css({
// MathJaxによって数式表示された領域の横幅を取得して横幅とする
"width" : jQuery("span.MathJax").width() + 3,
// 高さは少し増やす
"height" : jQuery("#MathPreview").height() + 2,
// 背景は白にする。拡張子が.pngになったときに、画像全体が真っ黒になるため
"background-color": "white"
});

// キャプチャ開始。html2canvasというライブラリを使う
html2canvas(jQuery("#MathPreview")[0], {
// キャプチャ領域がCanvasとなっていて、それを受け取る
onrendered: function(canvas) {
// aタグを有効化する
jQuery("#download").attr({
"href" : canvas.toDataURL().replace("image/png", "application/octet-stream"),
"download": "数式.jpg"
});

// 数式の表示領域を元に戻す
jQuery("#MathPreview").css({
"width" : "100%",
"height" : "" ,
"background-color": ""
});
// 「少々お待ちください。」を消しておく
jQuery("#imageMessage").remove();
}
});
}




※)数式領域の横幅を「jQuery("span.MathJax").width()」で取得していますが、MathJaxで数式レンダリングするごとに数式領域のidが変わっていくので、ページ内の最初のclass="MathJax"、すなわち数式領域の横幅を取得しています。
そのため、ページ内にはこの数式領域より先に数式を表示しないようにしています。
使い方の文章の中に$\mathrm{\TeX}$というMathJaxによる数式レンダリングの領域がありますが、これは数式表示の後に書いています。




このアプリケーションについて

数式表示のプログラミングした後で、それを画像化するツクリですが、

数式UI(エディタ)を設置して、そこに画像化ボタンを設置するのもアリだと思います。

実際、ホームページではそのような数式UIがあります。
UIの機能の中に画像化がある感じです。

ですが、数式から画像を生成するところだけを取り沙汰して単体のページとするのもアリだと思います。




所感

今回は、既存の数式UIの画像化を向上させるきっかけとなりました。

(以前は、300×300で、しかも数式レンダリングの途中の状態でした)



他の数式画像生成について

ちなみに、Google Chart APIでも$\mathrm{\TeX}$の数式コマンドから画像生成ができるそうなのですが、複数行の数式を表示する方法が見つからないため、MathJaxの優位性により、こちらのアプリケーションの方がオススメです。
Google Chart APIによる画像生成
↓↓↓





posted by Line Segment at 18:00 | Comment(0) | TrackBack(0) | ホームページ | このブログの読者になる | 更新情報をチェックする