Webによる数式表示2(150%)

icon 項目のみ表示/展開表示の切り替え

数式の表示例

ブラウザの表示倍率を大きくした状態を表しています。(高解像度ディスプレイで見ている場合、表示倍率が最初から2などの拡大状態になっている場合があります。)
数式の画像の大きさはわかりませんのでまず100%で表示して、表示後にloadイベントで画像サイズを取得し画像自体を150%大きく作成して表示した例です。

CODECOGS PNG

<!DOCTYPE html>
  <html lang="ja">
  <head>
  <meta charset="utf-8"/>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
  </head>

  <body>
  <img alt="x=¥frac{-b ¥pm ¥sqrt{b^2-4ac}}{2a}" class="codecogpng22" /><br />

  <script type="text/javascript">

  //  CodeCogsで150%の大きさの画像を作成して表示

  function tex_load22c(e){
     var img=e.target;
     img.removeEventListener("load", tex_load22c,false);
     var r=1;
     img.width  = Math.round(img.naturalWidth*r);
     img.height = Math.round(img.naturalHeight*r);
     //要素の直後に追加
     var s = document.createElement('span');
     s.textContent = "150dpiで描画し"+img.width+"*"+ img.height+"で表示("+r+"倍)";
     img.parentNode.insertBefore(s, img.nextSibling);
     document.codecogs22_Form.textf.value=img.outerHTML;
  }

  $("img:.codecogpng22").each(function(){
    var g;
    var s;
    s=$(this).attr("alt");
    g='http://latex.codecogs.com/png.latex?¥¥dpi{150} '+encodeURIComponent(s);
    var o=this;
    o.addEventListener('load',tex_load22c,false);
    $(this).attr("src",g);
  });
  </script>

  </body>
  </html>

Latexの数式はimgタグのalt属性に記述しています。imgタグのクラス名をcodecogpng22とします。 JQuery+JavaScriptによりファイルの読み込み時にimgタグでクラス名がcodecogpng22のオブジェクトを抽出し、alt属性に記述されているLaTexの数式を取得しencodeURIComponentによりエンコードしcodecogsのURLを付加しsrc属性に設定します。 数式の画像サイズは、DPIであらかじめ1.5倍の大きさを指定します。設定時点でCodeCogsから数式の画像が取得されます。addEventListenerでloadイベントを登録することより画像表示後にtex_load223c関数が呼び出されます。
tex_load223c関数が呼び出されたら、まず画像サイズ更新時に再度イベントが発生しないようremoveEventListenerでイベントリスナーを消去します。画像サイズを取得し1.5倍のピクセル数をwidth heightに登録します。
ここでは画像のサイズがわかるようにspan属性を付加して元の画像サイズと拡大後の画像サイズを表示するようにしています。画像サイズの表示が不要であれば、addEventListenerの行とtex_load22c関数の//要素の直後に追加から関数の最後までの行が不要となります。最終的なimgタグの内容は以下の通りとなります。



x=\frac{-b \pm \sqrt{b^2-4ac}}{2a}   サンプルページ

Google Chart API jpg

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
</head>

<body>
<img alt="x=¥frac{-b ¥pm ¥sqrt{b^2-4ac}}{2a}" class="googleapi22" /><br />

<script type="text/javascript">

// Google APIで100%表示後サイズを取得し150%サイズの画像をして再表示する

function tex_load22(e){
   var img=e.target;
   img.removeEventListener("load", tex_load22,false);
   var g=img.src;
   var r=1.5;
   var ox=img.width;
   var oy=img.height;

   var x=Math.round(img.width*r);
   var y=Math.round(img.height*r);
   g=g+"&chs="+x+"x"+y;
   img.width  = x;
   img.height = y;
   img.src=g;
   //要素の直後に追加
   var s = document.createElement('span');
   s.textContent = +ox+"*"+oy+"を"+x+"*"+ y+"で再描画して表示("+r+"倍)";
   img.parentNode.insertBefore(s, img.nextSibling);
   document.google22_Form.textf.value=img.outerHTML;
}

$("img:.googleapi22").each(function(){
  var g;
  var s=$(this).attr("alt");
  g='http://chart.apis.google.com/chart?cht=tx&chl='+encodeURIComponent(s)+'}&chof=jpg';
  var o=this;
  o.addEventListener('load',tex_load22,false);
  $(this).attr("src",g);
});

</script>

</body>
</html>

Latexの数式はimgタグのalt属性に記述しています。imgタグのクラス名googleapi22とします。
JQuery+JavaScriptによりファイルの読み込み時にimgタグでクラス名がgoogleapi22のオブジェクトを抽出し、alt属性に記述されているLaTexの数式を取得しencodeURIComponentによりエンコードしGoogle Chart APIのURLを付加しsrc属性に設定します。設定時点でGoogle Chart APIから数式の画像が取得されます。
addEventListenerでloadイベントを登録することより画像表示後にtex_load22関数が呼び出されます。 tex_load22関数が呼び出されたら、まず画像サイズ更新時に再度イベントが発生しないようremoveEventListenerでイベントリスナーを消去します。画像サイズを取得し1.5倍のピクセル数をwidth heightに登録します。
かつsrc属性のURLの最後に1.5倍の画像サイズを指定します。
ここでは画像のサイズがわかるようにspan属性を付加して元の画像サイズと拡大後の画像サイズを表示するようにしています。画像サイズの表示が不要であれば、addEventListenerの行とtex_load12関数の//要素の直後に追加から関数の最後までの行が不要となります。 最終的なimgタグの内容は以下の通りとなります。



x=\frac{-b \pm \sqrt{b^2-4ac}}{2a}   サンプルページ