Question

我正在编写一个页面，其中只包含一个画布和一个简单的JavaScript代码。

在JavaScript中，我创建了一个Image，但它从未附加到页面上，而是通过加载URL的timeout循环运行，有时可能会返回带有MIME的实际图像类型设置为image/jpeg，或其他时间可能会返回MIME类型为NOIMAGE的文本text/plain。

当url返回一个图像时，Image运行其onload函数，该函数将自己绘制到页面中的画布并减少循环的超时间隔。

当url返回文本时，Image会运行其onerror函数，这只会增加循环的超时间隔，而不是在画布中绘制它。

这个逻辑非常有效，但是当浏览器尝试将Image设置为文本时，它总会在控制台中抛出此警告，这会越来越消耗内存：

Resource interpreted as Image but transferred with MIME type text/plain: "http://localhost:6969/image.cgi".

如何避免将此警告反复打印到控制台？

编辑：添加了示例工作代码。

<DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <canvas id="myCanvas" width="640" height="480"></canvas>
    </body>
    <script defer type="application/javascript">
            var canvas = document.getElementById("myCanvas");
            var image = new Image();

            var timeout = 100;

            var timer = function() {
                setTimeout(function() {
                    image.src = "http://localhost:6969/image.cgi?timestamp=" + new Date().getTime();
                }, timeout);
            };

            image.onload = function() {
                console.log("Success");
        var ctx = canvas.getContext('2d');

        ctx.save();
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.restore();
        ctx.beginPath();

        ctx.drawImage(image, 0, 0, parseInt(this.width), parseInt(this.height));

        if (timeout > 50) {
            timeout = timeout - 9;
        }

        timer();
            };

            image.onerror = function() {
            console.log("Error");
                if (timeout < 5000) {
                    timeout = timeout + 14;
                }

                timer();
            };

            timer();
        </script>
</html>

Answer 1

它可能与您的图像是CGI扩展有关。我在尝试加载扩展名不是.js的JavaScript文件时发现了类似的问题。看一下这个图表

http://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support

其中包含各种浏览器支持的图像类型的图表，CGI甚至没有标记。

Chrome - 有关错误MIME类型的控制台警告

1 个答案: