Question

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

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);

这意味着＆＃34;匹配所有具有＆＃39;。＆＃39;的模式。其后是（）中的任何字符串，/ 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);

Answer 2

如何实现这一目标只需要很小fiddle：

    <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 3

有两种相对较好的方法可以检查图像是否在您离开的位置。

使用image属性onerror（与所有浏览器兼容）。
使用ajax（需要控制台中的兼容性，抛出和错误，跨域策略等）。

：一种。您只想检查图像（具有跨域功能）是否可用且不要显示它

它是纯粹的JavaScript，因此它可以在大多数移动/桌面浏览器上本地运行。此代码还避免了整个图像的无用负载。

此代码在控制台中抛出错误。但这不是问题。可能通过使用try catch来避免该错误，但是如果在大量使用的情况下需要函数内部的匿名函数会导致内存泄漏。 ;）。因此404错误不是问题，因为它实际上没有找到所请求的图像。

 var c=new XMLHttpRequest;
 c.open('GET','THE_IMAGE_LINK');
 c.onreadystatechange=function(){
  if(this.readyState==2){
   // get only the header info not the full image
   alert(this.status);
   // 200=img ok 404=not found
   this.status!='200'||alert(this.getAllResponseHeaders());
   //contains more info about the image
   this.abort()
   //stop loading the extra image data if you just check.
  }
 };
 c.send();

0：请求未初始化

1：建立服务器连接

2：收到请求

3：处理请求＆lt; - 不需要

4：请求已完成且响应已准备好＆lt; - 不需要

<强> B中。如果找不到，您想要显示替代图像。

function noimg(e){
 this.src='NoImgIcon.png';
}
function fadein(e){
 document.body.appendChild(this);
}

function loadIMG(url){
 var img=document.createElement('img');
 img.onload=fadein;
 img.onerror=noimg;
 img.src=url
}

loadIMG('THE_IMAGE_LINK');

想要它在一个功能？问。如果您有任何问题，请询问。

Answer 4

只需检查图像是否完整。这是最简单的方法，对我有用。

if(image.complete){
   //draw image
}

更多信息： https://www.w3schools.com/jsref/dom_obj_image.asp

完成：返回浏览器是否已完成图像加载

注意：当您有一个循环每秒重绘图像多次并可能在加载图像之前尝试绘制图像时，此功能最有用。如果您只需要在加载后绘制一次，则onload处理程序应该是解决方法，就像对此问题的其他建议一样。

Answer 5

<!DOCTYPE html>
<html>

<head>
    <script>
        function imageCheck(event) {
            var file = document.querySelector('input[type=file]').files[0];
            var reader = new FileReader();
            reader.onload = function () {
                if (reader.result == 'data:') {
                    alert('This file is corrupt')
                } else {
                    alert('This file can be uploaded')
                }
            }
            reader.readAsDataURL(event.target.files[0]);
        }
    </script>
</head>

<body>
    <input type='file' id="image" onchange="imageCheck(event)">
    <img id="output_image" />
</body>

</html>

如何在javascript

5 个答案: