如何在javascript中检查图像是否是损坏的图像

Question

我从 Twitter 获取个人资料图像并将图像 URL 存储在我的数据库中。某些网址给出了损坏的图像，其中网址以图像扩展名结尾，任何人都可以帮助我检查图像是有效图像还是损坏的图像。如果存在损坏的图像，我需要显示默认图像..

var image = opinionmakers[i].user_image;

                if (type == 'Twitter' && image.match(/jpeg/)) {
                    img = image.slice(0, -12) + ".jpeg";

                } else if (type == 'Twitter' && image.match(/jpg/)) {
                    img = image.slice(0, -11) + ".jpg";

                } else if (type == 'Twitter' && image.match(/JPG/)) {
                    img = image.slice(0, -11) + ".JPG";

                } else if (type == 'Twitter' && image.match(/png/)) {
                    img = image.slice(0, -11) + ".png";

                } else if (type == 'Twitter' && image.match(/gif/)) {
                    img = image.slice(0, -11) + ".gif";


                } else {
                    img = image;
                }

Answer 1

只是如何实现这一点的一个小技巧：

    <img src="https://pbs.twimg.com/profile_images/596630109613740032/S_jtpvR4.jpg" 
onLoad="checkState(this, true);" onError="checkState(this, false);">
    <img src="https://www.google.de/images/nav_logo195.png" 
onLoad="checkState(this, true);" onError="checkState(this, false);">

...

function checkState(e, s)
{
    console.log("loaded:");
    console.log(s);
    console.log(e);
}

Answer 2

首先，为了检查正确的图像扩展名，我建议使用 regex.test 函数，如下所示

/\.(jpeg|jpg|png|gif)\b/i.test(url);

这意味着“匹配所有带有‘.’的模式。” 后跟 () 中的任何字符串，/b 表示词尾，/i 表示不区分大小写。您也可以在其余代码之前使用它一次，以使其更清晰。

要检查有效图像，您可以创建一个 img 元素并对其错误做出反应并加载回调，如下所示https://jsfiddle.net/msong1q2/1/

var IsValidImage = function (url, callback) {
    $("<img>", {
        src: url,
        error: function () {
            callback(url, false);
        },
        load: function () {
            callback(url, true);
        }
    });
}
var CallbackFunction = function (url, isValid) {
    if (isValid) {
        alert(url + ' is valid image');
        //do whatever logic you want
    } else {
        alert(url + ' is invalid image');
        //do whatever logic you want
    }
}
IsValidImage('http://nonextistentUrl.com/image.png', CallbackFunction);
IsValidImage('http://placehold.it/350x150.png', CallbackFunction);