Canvas減少了Jpeg的圖像大小，但是爲什麼？

當我使用drawImage()以及之後使用canvas.toDataURL()將本地可保存的JPEG圖像繪製到Canvas時（使用鼠標右鍵單擊），則保存的Jpeg-Image的縮小文件大小約爲40％。只有在使用Jpeg時才如此。 PNG，GIF（非壓縮文件）尺寸增加。我認爲，如果我將Image-File轉換爲Base64，則尺寸增長至約130％。所以我認爲canvas-element具有自己的集成壓縮功能？如果是這樣，我可以停用它嗎？Canvas減少了Jpeg的圖像大小，但是爲什麼？

的代碼如下所示：

var img = new Image(); 

img.onload = function() 
{ 
var width = img.width; 
var height = img.height; 
context.drawImage(img, 0, 0,width,height); 
document.images[0].src = canvas.toDataURL('image/jpeg');//<-size = 30,2 KB (30.990 Bytes) 
} 
img.src = "http://www.roomeffect.de/pageslices/RSB.jpg"; //<-original file size = 58,5 KB (59.930 Bytes)

我不知道是什麼問題？

來源

2011-12-03 Okyo

這不是一個問題。 JPG是一種有損格式，沒有理由期望一個擴展爲位圖的JPG（所以你可以在屏幕上看到它）與通過再次壓縮該位圖而製作的新JPG相同。如果要保存原始文件，請保存原始文件。

來源

2011-12-04 02:42:05 robertc

「...再次壓縮該位圖」？那麼canvas是否會自行壓縮該位圖？ base64不是壓縮算法。令我感到不安的是，大約50％的壓縮率並不好。 – Okyo

@Okyo如果你在屏幕上看到一個圖像，那麼它目前沒有被壓縮。爲什麼50％的壓縮大小不好？整個壓縮點就是讓事情變得更小。 – robertc

是的，這實際上是正確的，你在說什麼，但我的意圖只是爲了瞭解這個問題背後的技術。無論如何thanx支持！ – Okyo

您可以指定JPEG質量作爲toDataURL函數的第二個參數。 Firefox的默認質量是0.92（92％）。

https://developer.mozilla.org/en/DOM/HTMLCanvasElement

來源

2011-12-03 22:58:44 Neil

thanx快速響應，但這並不能解決問題，文件大小仍然減少！ Doenst很重要，我指定的comp-quality。 – Okyo

這應該給你最好的結果：

document.images[0].src = canvas.toDataURL('image/jpeg', 1);

從MDN報價：

如果請求的類型是圖片/ jpeg或者image/WEBP，那麼第二說法，如果它介於0.0和1.0之間，被視爲指示圖像質量。

來源

2011-12-04 20:48:09 Pierre

Canvas減少了Jpeg的圖像大小，但是爲什麼？

回答

相關問題