Javascript 为什么此WebP支持函数每次返回随机结果'；跑什么？

我试图创建一段代码，确定浏览器是否支持WebP图像，然后确定是否加载JPEG或WebP图像。每次刷新浏览器时，它似乎会随机返回true和false

function supportsWebP() {
    var img = new Image();
    img.src = "/img/test-img.png";

    var canvas = document.createElement('canvas');
    canvas.width = img.naturalWidth; // or 'width' if you want a special/scaled size
    canvas.height = img.naturalHeight; // or 'height' if you want a special/scaled size

    canvas.getContext('2d').drawImage(img, 0, 0);

    var data = canvas.toDataURL('image/webp');
    if (data.startsWith("data:image/webp")) { // Will start with "data:image/png" if unsupported
        console.info("WebP is supported by your browser.");
        return true;
    }

    console.warn("WebP is NOT supported by your browser. Consider upgrading to Chrome/updating your browser version");
    return false;
}

当它第一次运行时，它返回

false

，但如果我运行一段时间后，它返回true。为什么会这样

（我在最新版本中使用了Chrome Canary，并在最新的Google Chrome版本中试用了它）

---

编辑：

test img.png

是一个1px x 1px图像，仅由100%黑色（

#000000

）像素组成。

将

src

应用于

图像需要一些时间，因此请使用
onload
侦听器：


函数支持SWEBP（）{
var img=新图像（）；
img.src="数据：image/jpeg；base64/9j/4aaqskzjrgabaqaabaad/2wbdaayebqyfbaygbwychakcgkjchqfxygbcufhyahsufghsgsjhbywywgywgyyyyyyyyyakcopgr8tmc0omcuoksj/2wbdaqchbqchbhwoichmkchmogkchgokgokgokgokgokgokkgokgokkgokkgokggggggggggkkkkkkckkkkkkkkkkkcgggggggggggggggggggggggkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkT/xaaueqeaaaaaaaaaaaaaaaaaaa/9oADAMBAAIRAxEAPwCoAEhf/9k=“；
img.onload=（）=>{
var canvas=document.createElement（'canvas'）；
canvas.width=img.naturalWidth；//如果需要特殊/缩放尺寸，请选择“width”
canvas.height=img.naturalHeight；//如果需要特殊/缩放尺寸，请选择“height”
canvas.getContext（'2d'）.drawImage（img，0，0）；
var data=canvas.toDataURL（'image/webp'）；
if（data.startsWith（“data:image/webp”）{//如果不支持，将以“data:image/png”开头
info（“您的浏览器支持WebP”）；
返回true；
}
控制台。警告（“WebP不支持浏览器。请考虑升级到Firefox的Chrome /更新浏览器版本”）；
返回false；
}
}
supportsWebP（）
如果在drawImage（）上循环会发生什么在函数中执行两次函数，第二次检查数据？在这种情况下是否总是返回真值？也许使用webp图像调用toDataURL有一些不确定的地方？奇怪的是，您可能需要这样做，似乎确实需要借助黑客来使其一致。仅供参考，
Firefox
不支持奥特webp@SamuelCook的确如此dont@DavidWheatley，很乐意帮忙！