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

The specification和MDN表示PNG图片不支持第二个参数。规范说第二个参数仅适用于image/jpeg; MDN说image/jpeg或image/webp。

请注意，除了PNG之外，浏览器不需要支持任何其他内容，如果您请求不支持的内容，则会返回PNG。所以你可以这样做：

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

...你要么得到低质量的JPEG（0.2真的很低），要么忽略第二个参数的PNG。

压缩图像大小JavaScript

2 个答案: