压缩图片大小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。