JavaScript キャンバスを使用したサイズ変更された画像のスムージング

HTML キャンバスを使用した画像のサイズ変更は、Web アプリケーション内でビジュアルを操作する便利な方法を提供します。ただし、デフォルトのサイズ変更アルゴリズムでは、画像がピクセル化されたりギザギザになったりする可能性があり、画像編集ソフトウェアに見られる滑らかさが欠けています。この問題は、画像のスムージング技術を組み込むことで解決できます。

滑らかさを実現する 1 つのアプローチは、段階的にダウンスケーリングすることです。この方法では、より小さな増分を使用して段階的に画像のサイズを変更します。たとえば、元の画像のサイズを直接 50% に変更する代わりに、最初に 75%、次に 62.5% というように縮小できます。この増分アプローチにより、ピクセル補間の影響が軽減され、よりスムーズな結果が得られます。

var oc = document.createElement('canvas'),
    octx = oc.getContext('2d');

oc.width = img.width * 0.5;
oc.height = img.height * 0.5;
octx.drawImage(img, 0, 0, oc.width, oc.height);

// ...

ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
    0, 0, canvas.width, canvas.height);

もう 1 つの方法は、Chrome などの最新のブラウザーでサポートされている imageSmoothingQuality プロパティを設定することです。このプロパティは、画像のサイズ変更に使用される補間アルゴリズムを制御します。 「高」に設定すると、ブラウザはより高度なバイキュービック補間方法に切り替わり、画像の滑らかさが向上します。

canvas.getContext('2d', { imageSmoothingQuality: "high" });

段階的にダウンスケーリングを利用したり、画像のスムージング品質を調整したりすることで、開発者は JavaScript キャンバスでサイズ変更された画像の外観を強化し、視覚的に魅力的な結果を作成できます。