WEB上でドット絵を拡大表示する

目次

設定方法

CSSJavascript

CSS の記述方法について

optimizeSpeedoptimize-contrastcrisp-edgesそして姿を消したpixelated復活

JavaScript について

設置方法技術解説ライセンス


JavaScript について

もう Javascript での対応は不要と思いますが、一応残しておきます。

旧 Edge は CSS を理解しませんが、JavaScript で同等の動作が可能です。


設置方法

というわけで、冒頭に書いたプログラムの使い方。

プログラムの動作前提として、jQuery が必要です。1.7.2 と 2.0.2 で動作確認しました。多分一般的なバージョンなら動きます。

以下のコードを、head 内に記述します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

さて、冒頭のプログラムをもう一度引用しておきましょう。

<script type="text/javascript"><!--
if(navigator.userAgent.indexOf("Edge")>0)
$(window).load(function(w,h,c,x,y){w="width";h="height";
$("img")
.map(function(v,d){c=$("<canvas>")[0];x=c[w]=d[w];y=c[h]=d[h];
v=c.getContext("2d");
v.imageSmoothingEnabled=v.msImageSmoothingEnabled=0;v.drawImage(d,0,0,x,y);
$(c).replaceAll(d)})})
--></script>

上のコード全体を、HTML の中に書いてください。head 内でも body 内でも、どこでも構いません。

ページ内の全ての画像を読み込み終わったタイミングで動作しますので、HTML の一番最後に書くのがおすすめです。


中央あたりに $("img") と書いてある行があります。ここは、環境に合わせて書き変えてください。

記述方法は CSS に準じます。つまり、 class="dot" を対象とする場合、$(".dot") とします。


技術解説

先のコードは、短くするために読みにくくなっています。

同じ内容を、読みやすくしたコードを示します。

<script type="text/javascript"><!--
if(navigator.userAgent.indexOf('Edge')>0){    // Edgeのときだけ
  $(window).load(function(){                  // 画像全部読みおわったら
    $("img").map(function(v,d){               // 全部の img タグに対し
      var c = $("<canvas>")[0];               // canvasを作って
      var x = c.width  = d.width;             // img と同じ大きさにする
      var y = c.height = d.height;
      v=c.getContext("2d");                   // canvas の 2d context を得て
      v.imageSmoothingEnabled=false;          // 「スムージングなし」を設定(新ブラウザ向け)
      v.msImageSmoothingEnabled=false;        // 「スムージングなし」を設定(旧ブラウザ向け)
      v.drawImage(d,0,0,x,y);                 // img 画像を、canvas に拡大コピー
      $(c).replaceAll(d);                     // img タグを canvas に置き換え
    })
  })
}
--></script>

コメントを入れたので、内容はだいたい理解していただけるかな、と思います。

UserAgent に、Edge の文字列が入っていることを確認しています。入っていないと動作しません。Edge であっても、UserAgent 偽装していると動きません。

出来るだけ小さなコードにしたかったから、必要最低限のことしかやっていない、とも言えます。


「スムージングなし」の設定は、Javascript の現行仕様では imageSmoothingEnabled で制御できることになっています。


ここで制御できるのは「スムージングを行うか否か」ということだけ。スムージングしない、ということが、必ずしもニアレストネイバー法(単純な拡大)を使うことを意味してはいません。オプションがどのような意味を持つのか、ちゃんと規定されていないのです。


もっとも、スムージング「する」時には、さらに別のプロパティで方法を選べるようになっています。

ということは、「しない」時は、ニアレストネイバーになるのではないかな、と期待できます。


「旧」Edge ではこのコードが必要で、「新」Edge では不要です。

では、「新」Edge で邪魔することはないか、ですが、おそらくは大丈夫。


このプログラムは、UserAgent でブラウザを見分けています。そして、Edge は、新旧で UserAgent を変えていて、混乱しないように気を使っています。

(つまり、新 Edge は、名前が同じだけの別ブラウザ、という扱いになっています)


実は、このページで動かしているコードは、説明したものとは違う。
コードサイズも増えているし、何よりも「細かな技法」を入れているために説明には向かないのだが、ページの読み込み完了を待たずに起動するため、待たされる時間が短い。
知りたい人は最初のページのHTMLソースを見て、自分で理解してください。
(記事冒頭の h1 タグの下に書き込んであります)



CSS に関しては、他のサイトが紹介しているのと大差ないので権利主張しません。自由に使ってください。

Javascript コードに関しては、コピペして使うのや、「こんな方法がある」という紹介は自由だけど、元ネタとしてこのページを明示してもらえるとありがたいです。もっとも、強制ではありません。


前ページ 1 2 3

(ページ作成 2013-06-09)
(最終更新 2020-02-03)
第3版 …他の版 初版 2版

戻る
トップページへ

-- share --

6000

-- follow --




- Reverse Link -