WEB上でドット絵を拡大表示する
目次
技術解説
先のコードは、短くするために読みにくくなっています。
同じ内容を、読みやすくしたコードを示します。
<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 付きでアクセスしています。
Edge が方針を切り替え、ms 付きをやめました。
急な完全切り替えで、新旧ブラウザでの指定方法の互換性がないため、プログラム側で両方を指定する必要があります。
上のコードで「方法論」は示せたと思いますので、UserAgent 偽装に対応するとか、ページ全体の読み込みを完了する前に綺麗なドットで表示するとか、そういうのは各自やってください。
コードサイズも増えているし、何よりも「細かな技法」を入れているために説明には向かないのだが、ページの読み込み完了を待たずに起動するため、待たされる時間が短い。
知りたい人は最初のページのHTMLソースを見て、自分で理解してください。
（記事冒頭の h1 タグの下に書き込んであります）
ライセンス
CSS に関しては、他のサイトが紹介しているのと大差ないので権利主張しません。自由に使ってください。
Javascript コードに関しては、コピペして使うのや、「こんな方法がある」という紹介は自由だけど、元ネタとしてこのページを明示してもらえるとありがたいです。もっとも、強制ではありません。