壓縮圖片大小JavaScript

Question

我正在做一個項目，我們可以從視頻中拍攝快照。 您可以在下面查看我的代碼段。

             function snapshot(){
                context.drawImage(video, 0, 0, w, h);
                img = document.createElement("img");
                img.src = canvas.toDataURL();
             }

w，h只是視頻的寬度和高度。 這些計算如下。

            video.addEventListener('loadedmetadata', function() {

               var ratio = video.videoWidth / video.videoHeight;
               w = video.videoWidth - 100;
               h = parseInt(w / ratio, 10);
               w= w-100; h= h-100;
               canvas.width = w;
               canvas.height = h;           
            }, false);

我在這里獲得的base64映像大約為260kb。 我想將此圖像減小到80kb以下。

我嘗試使用canvas.toDataURL('image/png', 0.2)但沒有用。

Answer 1

僅當圖像類型為jpeg或webp時，質量設置才有效。 嘗試使用以下內容：

canvas.toDataURL("image/jpeg", 0.1);

例如，從Docs中 ：

0到1之間的數字表示所請求的類型是image/jpeg或image/webp圖像質量。
如果此參數為其他任何參數，則使用圖像質量的默認值。 其他參數將被忽略。

Answer 2

規范和MDN表示PNG圖片不支持第二個參數。 規范說第二個參數僅用於image/jpeg ； MDN表示image/jpeg或image/webp 。

請注意，瀏覽器不需要支持PNG以外的任何功能，並且如果您請求它們不支持的功能，它們會返回PNG。 因此，您可以執行以下操作：

img.src = canvas.toDataURL('image/jpeg', 0.2);

...而您將得到JPEG低質量（ 0.2確實很低），或忽略第二個參數的PNG。