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

Question

我从 Twitter 获取个人资料图片并将图片 url 存储在我的数据库中。一些 url 给出损坏的图像，其中 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

首先，为了检查正确的图像扩展，我建议使用这样的 regex.test 函数

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

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

要检查有效图像，您可以创建一个 img 元素并对它的错误使用react并加载回调，就像这样 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);