html - 在 canvas.toDataURL 中检测浏览器对图像类型的支持

Question

我正在尝试从 <canvas> 获取 dataUrl元素使用 canvas.toDataURL() .默认情况下，它返回 image/png , 但一些浏览器支持 image/jpeg文件类型。

我如何检测浏览器是否支持 image/jpeg ？

Answer 1

您只需像这样指定您想要 JPEG:

var quality = 0.8;
var dataUri = canvas.toDataURL('image/jpeg', quality); // quality is optional

如果您的 dataUri 现在包含相同的字符串，则支持 JPEG。否则字符串将为 image/png。

if (dataUri.match('image/jpeg')) {
    // support jpeg
}

也就是说，我不认为有任何浏览器不支持jpeg 格式。像这样的测试更适合不同程度的更不常见的格式，例如 webp、位图等。

对于一般测试，您可以这样做:

function hasSupport(mime) {
    var canvas = document.createElement('canvas');
    canvas.width = canvas.height = 1;
    var uri = canvas.toDataURL(mime);
    return (uri.match(mime) !== null);
}