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

数式の表示例

画像自体を150%とブラウザのズーム倍率を考慮して大きな画像を作成しwidth heightで縮小します。
数式の画像の大きさはわかりませんのでまず100%の画像を作成し、表示後にloadイベントで画像サイズを取得し150%ズーム倍率×ブラウザの表示倍率の画像を作成してwidth heightでズーム倍率分を縮小します。ブラウザではズーム倍率で表示されますので、画像のピクセルと画面のピクセルの大きさが一致しますので綺麗に表示されます。とくに高解像度のモニターを使っている人は恩恵にあずかれます。
window.devicePixelRatioでズーム倍率を取得しています。
ブラウザで表示場率を変更するとresizeイベントが発生しますのでこのタイミングで数式の再描画をします。
下記のwindow.devicePixelRatioの表示はブラウザの表示倍率を変更するときに発生するイベントで書き換えています。
現在のwindow.devicePixelRatio=

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="codecogpng223" /><br />
現在のwindow.devicePixelRatio=<span id="wdr"></span>
<script type="text/javascript">

window.addEventListener("resize",windowZoom, false);

window.onload = function(){
  var r=document.getElementById('wdr');
  r.innerText=window.devicePixelRatio.toFixed(2);
}

//  CodeCogsで150%×ブラウザの表示倍率の大きさの画像を作成しwidth,heightでブラウザの表示倍率分縮小して表示


function tex_load223c(e){
   var img=e.target;
   img.removeEventListener("load", tex_load223c,false);
   var r=1.5;
   var nw=img.naturalWidth;
   var nh=img.naturalHeight;
   img.width  = Math.round(img.naturalWidth/window.devicePixelRatio);
   img.height = Math.round(img.naturalHeight/window.devicePixelRatio);
   //要素の直後に追加
   var s=img.nextElementSibling;
   if(s.nodeName=='SPAN'){
     if(s.className=='codecogs223_txt'){
       s.parentNode.removeChild(s);
     }
   }
   var r2=Math.round(window.devicePixelRatio*150);
   s = document.createElement('span');
   s.className='codecogs223_txt';
   s.textContent = r2+"DPIの画像("+nw+"*"+nh+   ")を作成し"+img.width+"*"+ img.height+"の大きさで表示("+r+"倍)";
   img.parentNode.insertBefore(s, img.nextSibling);
}

$("img:.codecogpng223").each(function(){
  var g;
  var s;
  s=$(this).attr("alt");
  var r=Math.round(window.devicePixelRatio*150);
  g='http://latex.codecogs.com/png.latex?¥¥dpi{'+r+'} '+encodeURIComponent(s);
  var o=this;
  o.addEventListener('load',tex_load223c,false);
  $(this).attr("src",g);
});

function windowZoom(){
  var r=document.getElementById('wdr');
  r.innerText=window.devicePixelRatio.toFixed(2);
  $("img:.codecogpng223").each(function(){
    var g;
    var s;
    var nx,ny;
    var o=this;
    s=$(this).attr("src");
    var r=Math.round(window.devicePixelRatio*150);
    g=s.replace(/dpi{¥d*}/,'dpi{'+r+'}');
    o.addEventListener('load',tex_load223c,false);
    $(this).attr("src",g);
  });}


</script>

</body>
</html>

Latexの数式はimgタグのalt属性に記述しています。imgタグのクラス名をcodecogpng223とします。 JQuery+JavaScriptによりファイルの読み込み時にimgタグでクラス名がcodecogpng232のオブジェクトを抽出し、alt属性に記述されているLaTexの数式を取得しencodeURIComponentによりエンコードしcodecogsのURLを付加しsrc属性に設定します。数式の画像サイズは、DPIであらかじめ1.5倍にブラウザの表示倍率(window.devicePixelRatio)を乗じた大きさを指定します。設定時点でCodeCogsから数式の画像が取得されます。addEventListenerでloadイベントを登録することより画像表示後にtex_load223c関数が呼び出されます。
tex_load223c関数が呼び出されたら、まず画像サイズ更新時に再度イベントが発生しないようremoveEventListenerでイベントリスナーを消去します。画像サイズを取得し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="googleapi223" /><br />
現在のwindow.devicePixelRatio=<span id="wdr"></span>

<script type="text/javascript">

window.addEventListener("resize",windowZoom, false);

window.onload = function(){
  var r=document.getElementById('wdr');
  r.innerText=window.devicePixelRatio.toFixed(2);
}

//  GoogleAPIで150%×ブラウザの表示倍率の大きさの画像を作成しwidth,heightでブラウザの表示倍率分縮小して表示

function tex_load223(e){
   var img=e.target;
   img.removeEventListener("load", tex_load223,false);
   var g=img.src;
   var r=1.5;
   var ox,oy;
   if(img.getAttribute("data-flags") !=null){
     img.removeAttribute("data-flags");
     ox=img.getAttribute("data-img-width");
     oy=img.getAttribute("data-img-height");
   }else{
     ox=img.naturalWidth;
     oy=img.naturalHeight;
     img.setAttribute("data-img-width",ox);
     img.setAttribute("data-img-height",oy);
   }
   var wr=window.devicePixelRatio;
   var x=Math.round(ox*r*wr);
   var y=Math.round(oy*r*wr);
   var p=g.lastIndexOf('&chs');
   if(p!=-1){
     g=g.slice(0,p);
   }
   g=g+"&chs="+x+"x"+y;
   img.src=g;
   img.width  = Math.round(ox*r);
   img.height = Math.round(oy*r);
   nx=img.getAttribute("data-img-width");
   ny=img.getAttribute("data-img-height");
   //要素の直後に追加
   var s=img.nextElementSibling;
   if(s.nodeName=='SPAN'){
     if(s.className=='googleapi223_txt'){
       s.parentNode.removeChild(s);
     }
   }
   s = document.createElement('span');
   s.className='googleapi223_txt';
   s.textContent = +ox+"*"+oy+"を"+x+"*"+ y+"で再描画して"+img.width+"*"+img.height+   "の大きさで表示("+r+"倍)";
   img.parentNode.insertBefore(s, img.nextSibling);
}

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

function windowZoom(){
  var r=document.getElementById('wdr');
  r.innerText=window.devicePixelRatio.toFixed(2);
  $("img:.googleapi223").each(function(){
    var s=$(this).attr("src");
    var o=this;
    var nx,ny;  //  大きさを指定しない時の大きさ

    nx=o.getAttribute("data-img-width");
    ny=o.getAttribute("data-img-height");
    if(nx != null){
      $(this).attr("src","");
      o.addEventListener('load',tex_load223,false);
      var p=s.lastIndexOf('&chs');
      if(p!=-1){
        s=s.slice(0,p);
      }
      $(this).attr("src",s);
    }else{
      o.setAttribute("data-flags","resize");
      o.addEventListener('load',tex_load223,false);
      o.fireEvent('load');
    }
  });
 }
</script>
</body>
</html>

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

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

ページのトップへ戻る

山本ワールド

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

数式の表示例

CODECOGS PNG

Google Chart API jpg