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

我正在尝试使用

canvas.toDataURL（）

从

元素获取数据URL。默认情况下，它返回

image/png

，但某些浏览器支持

image/jpeg

文件类型

---

如何检测浏览器是否支持

图像/jpeg

？

您只需指定您想要的jpeg如下：

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

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; 
}

如果您的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);
}

根据HTML5规范：

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

因此，您可以这样检查：

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

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; 
}

---

是的，我知道，但我想知道浏览器是否支持它？或者在其他方面，如果我使用它会有什么伤害&浏览器不支持这一点dataurl@Peeyush您可以制作一个小的屏幕外画布1x1像素，获取答案中的数据uri，并测试返回的字符串是否与提供的字符串匹配。这可能是测试支持的一种有效方法。@Peeyus如果不支持PNG格式，浏览器将始终回退到PNG，因此不会有任何伤害。