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

目次

設定方法

CSSJavascript

CSS の記述方法について

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

JavaScript について

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


技術解説

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

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

<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 で制御できることになっています。


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


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

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


問題が一つ。現在 imageSmoothingEnabled は正式な仕様ですが、長らく「草案」にすぎませんでした。草案の時は、頭に webkit や ms をつけて「独自実装である」ことを示すことになっています。

現在は正式な仕様になったので、Chrome では接頭語無しでも動きます。でも、Edge はまだ ms をつけないと動きません。

そのため、上記コードでは、ms 付きでアクセスしています。


2017.6.28 追記
Edge が方針を切り替え、ms 付きをやめました。
急な完全切り替えで、新旧ブラウザでの指定方法の互換性がないため、プログラム側で両方を指定する必要があります。


上のコードで「方法論」は示せたと思いますので、UserAgent 偽装に対応するとか、ページ全体の読み込みを完了する前に綺麗なドットで表示するとか、そういうのは各自やってください。


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



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

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


前ページ 1 2 3

(ページ作成 2013-06-09)
(最終更新 2017-06-28)
第2版 …他の版 初版

戻る
トップページへ

-- share --

6000

-- follow --




- Reverse Link -