如何以最佳品質縮小 HTML5 Canvas 中的圖像？-js教程-PHP中文網

如何以最佳品質縮小 HTML5 Canvas 中的圖像？

Susan Sarandon

發布： 2024-10-25 06:40:29

原創

822 人瀏覽過

How to Downscale Images in HTML5 Canvas with Optimal Quality?

HTML5 Canvas 調整大小（縮小）影像高品質

在HTML5 中，您可以使用canvas 元素來調整圖片大小，但預設縮小方法往往導致品質低落。以下是使用畫布縮小尺寸時達到最佳影像品質的步驟：

停用影像平滑： 預設情況下，瀏覽器會在調整大小時套用影像平滑來減少鋸齒狀邊緣。然而，這可能會使圖像模糊。若要停用影像平滑，請設定下列CSS 屬性：

<code class="css">canvas, img {
    image-rendering: optimizeQuality;
}</code>

登入後複製

保留縱橫比： 確保畫布的縱橫比與原始影像的縱橫比匹配防止失真。
使用像素完美縮小演算法：瀏覽器使用的預設縮小演算法通常會引入雜訊。為了解決這個問題，請使用像素完美的縮小演算法，該演算法考慮多個來源像素對每個目標像素的貢獻。以下是 GameAlchemist 的範例演算法：

<code class="javascript">function downScaleImage(img, scale) {
    // Implementation goes here...
}</code>

登入後複製

最小化重取樣步驟： 重複的縮小步驟會引入額外的雜訊和退化。如果您需要縮小到非常小的尺寸，請考慮使用多個步驟，但比例增量較小，以最大限度地減少失真。
使用大型來源影像：確保縮小後的影像保持清晰度，建議使用盡可能大的來源影像。
調整大小後修改顏色：如果需要，您可以在調整大小後修改畫布內的顏色。
以高品質格式編碼：將縮小後的影像儲存為檔案時，選擇高品質格式，例如具有高品質設定的 PNG 或 JPEG，以保留影像細節。

用法範例：

<code class="javascript">var img = document.createElement('img');
img.onload = function() {
    var canvas = document.createElement('canvas');
    canvas.width = 300;
    canvas.height = 200;
    var context = canvas.getContext('2d');
    context.imageSmoothingEnabled = false;
    context.drawImage(img, 0, 0, 300, 200);
    var scaledImage = downScaleImage(canvas, 0.5); // Downscale by half
    // Save or send the scaledImage using XMLHttpRequest
};
img.src = 'path/to/largeImage.jpg';</code>

登入後複製

執行下列步驟，您可以以最佳品質縮小HTML5 畫布中的影像，即使在調整為較小尺寸時也能保留其細節。

以上是如何以最佳品質縮小 HTML5 Canvas 中的圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！