サムネイル用のHTMLキャンバスのサイズ変更：ピクセル化を縮小し、サイズ変更された外観/補間を改善できますか？

Question

大きなキャンバスから始めます。drawImage()は、実際の画像からHTMLキャンバスにデータを描画するために使用されます。

後で、キャンバス/イメージのサムネイルを作成します（パフォーマンス上の理由から）。小さな幅と高さの新しいキャンバスを作成し、元のキャンバスを使ってサムネイルを作成しなおして、drawImage()を再度使用します。

多くのプラットフォームで、結果のサムネイル画像は非常にピクセル化されています（PC Chrome、PC Firefox、iOS Safari）が、Mac Firefoxなどの他のブラウザでは、リサイズははるかに優れています。

私に一貫した補間を与える解決法はありますか？たとえば、IEは設定可能な独自のCSSプロパティを持っています：

object.style.msInterpolationMode = “bicubic”; 

これは他のプラットフォームでも同じですか？具体的に暗黙的な画像のサイズ変更中にdrawImage()？または他の創造的な解決策は歓迎です

Answer 1

悲しいことに短い答えは組み込みの方法がないということです。異なるブラウザはアンチエイリアシングを実装している可能性があります。

残念ながらスペックはここで非常に寛容である：

原画像データをビットマップ画像である場合、転送先矩形の点で描いた値を元の画像データをフィルタリングすることによって計算されます。ユーザエージェント[ブラウザ] は、任意のフィルタリングアルゴリズム（例えば、双線形補間または最近隣）を使用することができる。

強調鉱山。言い換えれば、ブラウザはdrawImageを自由に実装できます。一貫性を望む人にとっては残念です。

getImageDataまたはdrawImage()への大量のコールを使用して独自のアルゴリズムを作成することはできますが、それは遅くなります。