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

数式の表示例

imgタグのwidth及びheightで150%に拡大した表示例です。
元のラスタ画像を単純に1.5倍していますので美しありません。ブラウザの表示倍率を大きくした状態を表しています。(高解像度ディスプレイで見ている場合、表示倍率が最初から2などの拡大状態になっている場合があります。)
数式の画像の大きさはわかりませんのでまず100%で表示して、表示後にloadイベントで画像サイズを取得しwidth及びheightに画像サイズの1.5倍の値を設定しました。
単純にwidthとheightに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="codecogpng12"/>

<script type="text/javascript">

// CodeCogsでwidth heightにより150%表示

function tex_load12c(e){
   var img=e.target;
   img.removeEventListener("load", tex_load12c,false);
   var r=1.5;
   var nx,ny;
   img.width  = Math.round(img.naturalWidth*r);
   img.height = Math.round(img.naturalHeight*r);
   //要素の直後に追加
   var s = document.createElement('span');
   s.textContent = img.naturalWidth+"*"+img.naturalHeight+"をwidth="+img.width+" height="+ img.height+"で表示("+r+"倍)";
   img.parentNode.insertBefore(s, img.nextSibling);
   document.codecogs12_Form.textf.value=img.outerHTML;
}

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

</body>
</html>

Latexの数式はimgタグのalt属性に記述しています。imgタグのクラス名をcodecogpng12とします。 JQuery+JavaScriptによりファイルの読み込み時にimgタグでクラス名がcodecogpng12のオブジェクトを抽出し、alt属性に記述されているLaTexの数式を取得しencodeURIComponentによりエンコードしcodecogsのURLを付加しsrc属性に設定します。設定時点でCodeCogsから数式の画像が取得されます。addEventListenerでloadイベントを登録することより画像表示後にtex_load12c関数が呼び出されます。
tex_load12c関数が呼び出されたら、まず画像サイズ更新時に再度イベントが発生しないようremoveEventListenerでイベントリスナーを消去します。画像サイズを取得し1.5倍のピクセル数をwidth heightに登録します。
単純にwidthとheightに150%を指定してもうまくいきませんでした。ここでは画像のサイズがわかるようにspan属性を付加して元の画像サイズと拡大後の画像サイズを表示するようにしています。画像サイズの表示が不要であれば、addEventListenerの行とtex_load12c関数の//要素の直後に追加から関数の最後までの行が不要となります。最終的な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>
<script type="text/javascript" src="../../std.js"></script>
</head>

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

<script type="text/javascript">
// Google APIでwidth heightにより150%表示

function tex_load12(e){
   var img=e.target;
   img.removeEventListener("load", tex_load12,false);
   var g=img.src;
   var r=1.5;
   g=g+"&chs="+img.width+"x"+img.height;
   var x=img.width;
   var y=img.height;
   img.width  = Math.round(img.naturalWidth*r);
   img.height = Math.round(img.naturalHeight*r);
   img.src=g;
   //要素の直後に追加
   var s = document.createElement('span');
   s.textContent = x+"*"+y+"をwidth="+img.width+" height="+ img.height+"で表示("+r+"倍)";
   img.parentNode.insertBefore(s, img.nextSibling);
   document.google12_Form.textf.value=img.outerHTML;
}

$("img:.googleapi12").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_load12,false);
  $(this).attr("src",g);
});

</script>
</body>
</html>

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

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

ページのトップへ戻る

山本ワールド

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

数式の表示例

CODECOGS PNG

Google Chart API jpg