Html5 Canvas調整大小

上午使用畫布在客戶端調整圖像大小，然後將該圖像上傳到服務器。我的意圖是將圖像調整爲其原始尺寸的一半，並希望看到文件大小減小。但調整後的圖像尺寸總是比原始尺寸大。Html5 Canvas調整大小

例如，

我2592 X 1936調整一個2.5 MB JPEG圖像文件具有尺寸1296 X 968（JPEG文件），並試圖將其上傳到服務器。在服務器上，我看到該文件以3.5 MB大小保存。

有沒有什麼，我們可以做，而調整大小與html5畫布，以便如果我們減少尺寸，我們可以期望像壓縮文件大小減少。

2011-08-23 Que

我知道通過畫布加載圖像時蹲下，但我忍不住想知道：您是否以JPEG開始並以PNG結尾？ –

是堅持圖像文件類型。 – Que

檢查JPEG的壓縮。例如，縮小尺寸的70％質量JPEG和以100％質量重新編碼的JPEG可能比原始尺寸更大。 – Seth

如果您使用toDataURL，則可以將第二個參數設置爲介於0.0和1.0之間的數字。這是JPEG質量等級，1.0意味着非常高的質量和非常大的圖像，並且接近0.0意味着質量較低的較小圖像。

因此，舉例來說，你可以嘗試：

data = downsizedCanvas.toDataURL("image/jpeg", 0.2);

下面是W3C的參考說明：www.w3.org: toDataURL

它看起來像有已經在Firefox中的錯誤做忽視質量，所以你可能需要在一些現代瀏覽器中測試。

2011-08-30 12:21:55 andrewmu

回答