Question

我正在尝试使用<canvas>从canvas.toDataURL()元素获取数据Url。默认情况下，它返回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，bitmap等。

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

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

Answer 2

根据https://www.w3.org/TR/html5/scripting-1.html#the-canvas-element的HTML5规范：

当尝试使用“image / png”以外的类型时，作者可以检查是否通过检查，图像确实以请求的格式返回查看返回的字符串是否以其中一个完全字符串开头 “data：image / png”或“data：image / png;”。如果是，则图像为PNG，因此不支持所请求的类型。（一个例外）这是在画布没有高度或没有宽度的情况下，在这种情况下结果可能只是“数据：”。）

因此你可以这样检查：

var type = 'image/jpeg';
var data = canvas.toDataUrl(type);

if ( /^data:image\/png[,;]/.test(data) ) {
  type='image/png';
} else if ( /^data:,/.test(data) ) {
  type = null; 
}

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

2 个答案: