html - キャンバスを使用して大きな画像を縮小します。スムージング

Question

canvasandメソッドを使用して大きな画像を縮小するとdrawImage、結果は完璧にはほど遠いものになります。

この画像を比較してください。左のものは実際にスケーリングされたイメージのキャンバスであり、右のものは望ましい結果です。この画像のオリジナルは 1600x900 の写真です。スケールは元のサイズから 200x113 になります。

元の画像の幅と高さが小さい場合、またはスケーリング比が大きい場合 (つまり、0.5 - 0.9)、すべて問題ありません。しかし、ユーザーが大きな画像のサイズを変更して、見栄えの良いサムネイルを作成できるようにする必要があります。

複数の小さなステップ (たとえば、1600px -> 1000px -> 500px -> 200px) で画像をスケーリングしようとしましたが、結果は良くなりましたが、パフォーマンスが非常に悪いため、これを拒否しました。

HTML5 と canvas を使用して私の目標を達成することが現在不可能である場合、将来可能になる可能性はありますか? HTML5 テクノロジーを拒否して ActionScript でアップロードするか、HTML5 でこれを実行しようとする (または待機する) かを考えているところです。私は HTML5 が好きで、実際にこのようなフレンドリーな技術を残したくありません。

Answer 1

左の画像は、より原始的な形式のリサンプリングまたは補間を使用して縮小されています。これは完全に、ブラウザのレンダリング エンジンが画像をスケーリングする方法に起因する可能性があり、結果はブラウザごとに異なります。

それがオプションである場合、結果の画質を完全に制御できる 1 つのアプローチは、画像をアップロードし、サーバー上でスケーリングしてから、クライアントにダウンロードして戻すことです。

もう 1 つの方法は、JS ライブラリを使用して、クライアント側で画像をリサンプリングすることです。それがどれほど実用的かはわかりません。