ユーザーがアップロードした畫(huà)像を処理するためにキャンバスを使用する必要があります。ユーザーがアップロードしたサイズは非常に大きい可能性があります。たとえば、現(xiàn)在のブラウザ ウィンドウの幅と高さを超えるため、サイズを調(diào)整します。ブラウザの表示領(lǐng)域內(nèi)にある畫(huà)像をキャンバス上に描畫(huà)しますが、これはユーザーの畫(huà)像を縮小することに相當(dāng)します。キャンバスを処理した後、処理された畫(huà)像をぼやけずに元のサイズに戻す方法はありますか? ?
3
0
0
キャンバスの幅と高さは畫(huà)像の元のサイズと同じに設(shè)定されますが、表示される領(lǐng)域に合わせてキャンバスを拡大縮小するためにスタイルが使用されます。こうすれば畫(huà)像は圧縮されません
お誘いありがとうございます、お返事したいのですが、試したことがないのでわかりません。もちろん、自分で試すこともできますが、それほど時(shí)間はかかりません。
しかし、なぜ畫(huà)像を縮小してキャンバスに描畫(huà)するのかという考えを変えることができます。
畫(huà)像を表示領(lǐng)域に拡大縮小するのは、max-width または max-height で行うべきではないでしょうか?実際、これは畫(huà)像が表面上で縮小されているだけであり、naturalWidth と NaturalHeight は変更されていないため、実際にはズームの復(fù)元は必要ありません。
畫(huà)像を加工するためにCanvasを使用せず、imgを使用してブラウザの表示領(lǐng)域內(nèi)に表示します。 キャンバスによって処理されている畫(huà)像を表示する必要がある場(chǎng)合は、別のオフスクリーン キャンバスを作成し、関連する処理を比例的に拡大縮小し、最後にオフスクリーン キャンバスを保存します。
明確にできたかどうかはわかりません。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
