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

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

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