HTML5で「ニアレストネイバー」リサンプリングを使って画像をリサイズする方法

HTML5でニアレストネイバー法（最近傍補間）による画像のリサイズは可能です。主な方法として、CSSのimage-renderingプロパティを使う方法と、Canvas APIでピクセルを直接操作する方法の2つがあります。

方法1：CSSのimage-renderingプロパティを使う

最も手軽なのは、CSSでレンダリング方式を指定する方法です。以下のように記述します。

image-rendering: -webkit-optimize-contrast; /* WebKit系ブラウザ */
image-rendering: -moz-crisp-edges;          /* Firefox */

また、近年のモダンブラウザでは標準化された値であるpixelatedが広くサポートされており、現在ではこちらを指定するのが推奨されます。

image-rendering: pixelated;

この指定により、画像を拡大表示した際に補間処理が行われず、輪郭のはっきりしたドット絵風の表示になります。

方法2：Canvas APIでピクセル単位に描画する

より細かい制御が必要な場合は、オフスクリーンキャンバスを作成して画像を描画し、そのピクセルデータを取得して拡大描画する方法があります。手順は以下のとおりです。

1. オフスクリーン用のcanvas要素を作成し、元画像を描画する
2. getImageData()でピクセルデータを取得する
3. 各ピクセルのRGBA値を読み取り、拡大率（zoom）に応じて矩形として塗りつぶす

// オフスクリーンキャンバスを作成して画像を描画
var offCtx = document.createElement('canvas').getContext('2d');
offCtx.drawImage(myImg, 0, 0);

// ピクセルデータを取得
var pixels = offCtx.getImageData(0, 0, myImg.width, myImg.height).data;

// 各ピクセルを拡大率に応じて描画
for (var x = 0; x < myImg.width; ++x) {
  for (var y = 0; y < myImg.height; ++y) {
    var i = (y * myImg.width + x) * 4;
    var r = pixels[i];
    var g = pixels[i + 1];
    var b = pixels[i + 2];
    var alpha = pixels[i + 3];
    ctx2.fillStyle = "rgba(" + r + "," + g + "," + b + "," + (alpha / 255) + ")";
    ctx2.fillRect(x * zoom, y * zoom, zoom, zoom);
  }
}

このコードでは、myImgが元の画像オブジェクト、ctx2が出力先キャンバスの2Dコンテキスト、zoomが拡大倍率を表します。各ピクセルをzoom×zoomサイズの矩形として描画することで、滑らかな補間を行わないシャープな拡大（ニアレストネイバー）が実現できます。

なお、ピクセル数が多い画像ではループ処理に時間がかかるため、この手法はアイコンやドット絵など比較的小さな画像の拡大に適しています。大きな画像の場合は、CSSのimage-rendering: pixelatedを使う方がパフォーマンス面で有利です。