用畫布縮放大圖像。平滑

Question

當我使用canvas和drawImage方法縮放大圖像時，結果遠非完美。

將該圖片與這張照片比較。其中一個實際上是縮放圖像的畫布，右圖是一個理想的結果。這張圖片的原始圖片是1600x900照片。比例從原始大小變爲200x113。

當原始圖像的寬度和高度較小或縮放比例較大（即0.5 - 0.9）時，則一切正常。但我需要讓我的用戶能夠調整大圖像並製作出精美的縮略圖。

我試圖用多個小步驟（例如1600px - > 1000px - > 500px - > 200px）縮放圖像，結果更好，但對性能非常不利，所以我拒絕了這一點。

如果現在使用HTML5和canvas實現我的目標是不可能的，那麼未來有沒有可能呢？我只是在考慮是否應該拒絕HTML5技術，並在ActionScript上進行上傳或繼續嘗試（或等待）使用HTML5來做到這一點？我喜歡HTML5，實際上我不想離開這樣友好的技術。

Answer 1

左圖像被按比例縮小使用重新採樣或內插的更原始的形式。這可能完全取決於瀏覽器的渲染引擎如何縮放圖像，結果因瀏覽器而異。

如果是一個選項，您可以完全控制生成的圖像質量的一種方法是上傳圖像，在服務器上縮放圖像，然後將其下載回客戶端。

另一種方法是使用JS庫在客戶端重新採樣圖像。不確定這是多麼實際。