HTML5 Canvas圖像裁剪，調整大小和保存而不會降低質量

Question

• 我的畫布寬度等於窗口寬度。
• 我正在將圖像（1920x1080）繪制到畫布上。
• 然后，我選擇了要在畫布內裁剪圖像的區域，該區域將為492x369。
• 裁剪圖像后，我想將該裁剪的圖像縮放到1024x768。

但是當我縮放該圖像時，它會失去質量。

如何縮放圖像而又不損失其質量？

我執行的步驟是

1. 將圖像添加到主畫布
2. 畫布上的選定作物區域
3. 使用getImageData（）將裁剪的圖像數據存儲在temp變量中。
4. 在內存中創建了新畫布
5. 使用putImageData（）將圖像數據添加到內存畫布中的新圖像
6. 然后使用newcanvas.toDataURL（）獲取base64圖像數據

Answer 1

簡單的答案是你不能..

縮放后對圖像進行插值。 如果源圖像的質量較低（如此視頻快照中所示），則結果最多將是相等的，但如果不進行某些復雜的處理，則永遠不會更好。

在這種情況下，視頻快照會被大量壓縮，因此您會得到一個塊狀圖像（MPEG壓縮的結果），該圖像在原始大小下不那么明顯，但是在縮放后變得明顯（您可以更好地看到這些偽像，因為它們也在縮放）。