根據HTML5畫布調整大小限制圖片大小（<1MB）

我擁有圖片的HTML5上傳器。我爲用戶選擇的任何圖像上傳兩張圖像。一個是64x64，另一個是320x240。我正在使用canvas.drawImage()來調整圖像大小。一切工作正常。根據HTML5畫布調整大小限制圖片大小（<1MB）

但是，如何確保調整大小後的圖像是< = 1MB。調整大小後的圖像大小取決於正在使用的瀏覽器？

2014-02-24 Mayur Buragohain

假設您的圖像是24位，未壓縮的圖像文件大小可以計算如下：'320px x 240px x 24bit = 1,843,200 bits = 230,400 bytes'。它不應該超過1MB。（[Calculator]（http://jan.ucc.nau.edu/lrm22/pixels2bytes/calculator.htm）） – Raptor

我如何得到圖像的顏色深度？screen.colorDepth給了我colorPalette的深度。它會一樣爲屏幕上顯示的圖像？ –

是的。僅供參考，RGB是24位。 99％使用RGB。 – Raptor

由於生成的壓縮文件取決於壓縮文件的內容，所以無法保證大小。

如果您的圖像具有高頻率（很多細節，噪點等），那麼壓縮將會更加困難，您需要使用更強的質量設置（用於JPEG）來濾除更多數據。

但是，您可以計算圖像的原始大小。畫布是32位的，即RGB（24位）的三個8位通道+ alpha的一個8位通道。

如果你的圖像保存爲PNG，你將有RGBA - 的大小是：

width * height * 4 = size in bytes

如果你出保存爲JPEG，你將只有RGB：

width * height * 3 = size in bytes

JPEG能壓縮比PNG更重，因此您可以使用toDataURL(type [, quality= [0.0, 1.0]])的可選質量參數進一步縮小尺寸。

對於示例尺寸原料大小將是：

320 x 240 x 4 = 307 200 bytes (/ 1024 = 300 kb/1024 = 0.29 mb).

並用RGB（無alpha）

320 x 240 x 3 = 230 400 bytes (/ 1024 = 225 kb/1024 = 0.22 mb).

當圖像被轉換成一個數據-URI的內容是編碼爲base-64。由於數據被編碼的方式（加上一個小的頭部實際上使其成爲數據URI，IIRC大約14-20字節），Base-64總是將大小增加33％。

無論如何，在這種情況下，您應該在1 mb的範圍內。

來源

2014-02-24 16:58:19 K3N

根據HTML5畫布調整大小限制圖片大小（<1MB）

回答

相關問題