javascript - キャンバスの画像処理に関する問題

Question

ユーザーがアップロードした画像を処理するためにキャンバスを使用する必要があります。ユーザーがアップロードしたサイズは非常に大きい可能性があります。たとえば、現在のブラウザ ウィンドウの幅と高さを超えるため、サイズを調整します。ブラウザの表示領域内にある画像をキャンバス上に描画しますが、これはユーザーの画像を縮小することに相当します。キャンバスを処理した後、処理された画像をぼやけずに元のサイズに戻す方法はありますか? ?

すごく納得しました。Gu Yue と Jack に親指を立てるのは誰でしょうか?彼らが言ったことは正しい方法です！

Answer 1

キャンバスの幅と高さは画像の元のサイズと同じに設定されますが、表示される領域に合わせてキャンバスを拡大縮小するためにスタイルが使用されます。こうすれば画像は圧縮されません

Answer 2

お誘いありがとうございます、お返事したいのですが、試したことがないのでわかりません。もちろん、自分で試すこともできますが、それほど時間はかかりません。
しかし、なぜ画像を縮小してキャンバスに描画するのかという考えを変えることができます。
画像を表示領域に拡大縮小するのは、max-width または max-height で行うべきではないでしょうか?実際、これは画像が表面上で縮小されているだけであり、naturalWidth と NaturalHeight は変更されていないため、実際にはズームの復元は必要ありません。
画像を加工するためにCanvasを使用せず、imgを使用してブラウザの表示領域内に表示します。 キャンバスによって処理されている画像を表示する必要がある場合は、別のオフスクリーン キャンバスを作成し、関連する処理を比例的に拡大縮小し、最後にオフスクリーン キャンバスを保存します。
明確にできたかどうかはわかりません。

Answer 3

HTML5画像アップロード前処理 https://juejin.im/entry/5933e...