检测不良/禁止的图像链接

Question

有没有办法用js快速从提供的link中获取图片并查看是否有效？即看看它是否 link 像这样的纯图像 example 或当某些网站将您重定向到其他页面时发现情况，即不图像。

Answer 1

为了简单地检查它是否是图像 link 你可以使用它。

function checkURL(url) {
    return(url.match(/\.(jpeg|jpg|gif|png)$/) != null);
}

如果您想要一种检查图像是否合法的防弹方法，您可以使用它。

http://jsfiddle.net/jfriend00/qKtra/

JS:

function testImage(url, callback, timeout) {
    timeout = timeout || 5000;
    var timedOut = false, timer;
    var img = new Image();
    img.onerror = img.onabort = function() {
        if (!timedOut) {
            clearTimeout(timer);
            callback(url, "error");
        }
    };
    img.onload = function() {
        if (!timedOut) {
            clearTimeout(timer);
            callback(url, "success");
        }
    };
    img.src = url;
    timer = setTimeout(function() {
        timedOut = true;
        callback(url, "timeout");
    }, timeout); 
}


function record(url, result) {
    document.body.innerHTML += "<span class='" + result + "'>" + 
        result + ": " + url + "</span><br>";
}   

testImage("http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg", record);

testImage("http://photos.smugmug.com/photos/invalid344291068_HdnTo-Ti.jpg", record);

testImage("http://www.cnn.com/foo.jpg", record);

testImage("https://www.google.com/images/srpr/logo3w.png", record);

CSS:

.success {
    color: green;
}
.error, .timeout {
    color: red;
}

Answer 2

这里有一个使用 jquery 的技巧：

$("<img/>")
    .on('load', function() { console.log("image loaded correctly"); })
    .on('error', function() { console.log("error loading image"); })
    .attr("src", "image_url_here");

在这里找到了解决方案： Check if an image is loaded (no errors) in JavaScript

检测不良/禁止的图像链接

Detect bad / forbidden image links

javascript

media

image