在canvas.toDataURL中检测浏览器对图像类型的支持 [英] Detect browser support for image type in canvas.toDataURL

问题描述

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

I am trying to get dataUrl from <canvas> element using canvas.toDataURL(). By default, it returns image/png, but some browsers support the image/jpeg filetype.

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

How can i detect if a browser supports image/jpeg?

推荐答案

您只需指定要使用JPEG，如下所示:

You just specify that you want JPEG like this:

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

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

If your dataUri now contains the same string JPEG is supported. Otherwise the string will be image/png.

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

话虽这么说，但我认为没有不支持jpeg格式的浏览器.这样的测试更适合于Webp，位图等各种程度的不常见格式.

That being said, I don't think there is any browser which do not support the jpeg format. A test like this is better suited for more uncommon formats in various degrees such as webp, bitmap etc.

对于常规测试，您可以执行以下操作:

For a general test you could do:

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

这篇关于在canvas.toDataURL中检测浏览器对图像类型的支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！