畫布圖像調整大小使文件變大

我正在實現圖像上傳，但在此之前，我想根據限制（例如，最大寬度，最大高度，最大面積）進行一些調整大小。問題不在於調整圖像大小，而在於文件大小。畫布圖像調整大小使文件變大

我已經放棄了質量，結果沒有明顯的差異：帆布，Pica,Hermite，所以我決定去離線畫布。

文件大小是一個更大的問題，例如：如果我有PNG圖像，那就是345x518（54.2kB），我希望它適合區域512x512，將其調整爲341x512 jpeg（相同寬高比）後，文件大小變爲171.7kB。

大小功能：

function _canvasImageGet(original, dims) { 
    var canvas = document.createElement("canvas"); 
    canvas.width = dims.w; 
    canvas.height = dims.h; 
    canvas.getContext("2d").drawImage(original, 0, 0, canvas.width, canvas.height); 

    return canvas; 
}

有什麼辦法，我怎麼能得到調整後小於或相同的文件大小？它不一定要使用Canvas，但我會感激，如果調整大小將在客戶端。感謝所有的支持者。

來源

2017-08-27 marsielko

將取決於圖像及其內容。將圖像轉換爲JPEG格式時，可以將質量設置爲第二個參數。例如'canvas.toDataURL（「image/jpeg」，質量）'質量在0 <質量<= 1範圍內，其中低值質量較低。這可以對文件大小產生很大的影響。 – Blindman67

我用過的Canvas和其他庫沒有使用壓縮，因此在調整大小後，輸出文件自然比之前大。我已經找到了我需要的東西。 image-compressor確實調整大小和壓縮，並在客戶端完成所有操作。還有另一個庫JIC，但它不能調整大小。

來源

2017-08-30 08:44:32 marsielko

畫布圖像調整大小使文件變大

回答

相關問題