Sprawdzanie czy obrazek istnieje.

Question

Cześć,

 napisałem sobie małą funkcyjkę do sprawdzania, czy podany w argumencie link prowadzi do obrazka. Oto kod:

function image(arg){
	var a = new Image();
	var b = true;
	if(a.width > 1 && a.height > 1){
		b = true;
	}else{
		b = false;
	}
	a.src = arg;
	return b;
}

Niestety jak można się domyślić zawsze zwracane jest else. Mógłby mi ktoś podpowiedzieć jak to poprawić, tak żeby działało dobrze?

Comments

W zmiennej a masz pusty obiekt DOM elementu <img>, którego propertisy width oraz height są równe 0, stąd wykonuje się else.

Co masz na myśli przez?

 czy podany w argumencie link prowadzi do obrazka

Czy nie powinieneś raczej sprawdzić, czy link (przekazany do funkcji jako argument arg?) jest prawidłowy, zamiast skupiać się na obrazku? 

---

Teoretycznie o to mi chodzi, ale nie miałem za bardzo pomysłu jak to zrobić, więc wymyśliłem właśnie coś takiego.

---

Ok. W takim razie jak zamierzałeś sprawdzać prawidłowość ścieżki do obrazka? Masz jakieś wytyczne, co powinien zawierać taki link?

---

Nie, po prostu chciałem sprawdzić, czy to co podaję w argumencie jest jakimkolwiek obrazkiem. Jeśli jest to obrazek to funkcja zwraca true, jeśli jest to błędny link lub coś co nie jest obrazkiem, zwraca false. Potrzebuję po prostu czegoś co szybko mi sprawdzi, czy aby na pewno mamy do czynienia z obrazkiem

---

chciałem sprawdzić, czy to co podaję w argumencie jest jakimkolwiek obrazkiem

Nigdzie nie sprawdzasz niczego, co dotyczy argumentu arg. Jedynie przypisujesz go jako property src pustego obiektu a.

Jeśli jest to obrazek to funkcja zwraca true

Funkcja w obecnym kształcie nie zwróci Ci nigdy true, z powodu który opisałem w pierwszym komentarzu.

jeśli jest to błędny link lub coś co nie jest obrazkiem

Czy możesz pokazać kod wywołania tej funkcji (co przekazujesz jako parametr)? Jeśli jest to link, to skup się na sprawdzaniu jego (czyli argumentu arg) - np. zwróć true jeśli link przejdzie takiego regexa, a false jeśli nie przejdzie.

---

Funkcje będę wywoływał wielokrotnie w kodzie, ale może to wyglądać na przykład tak:

if(image('http://example.com/image.jpg')){
    ///
}else{
    console.log('Coś jest nie tak z tym obrazkiem...');
}

To co mi podesłałeś, nie byłoby złym pomysłem, ale ja muszę sprawdzać czy obrazek istnieje fizycznie pod wskazanym linkiem.

Answer 1

Jeśli chcesz sprawdzić, czy pod podanym adresem URL rzeczywiście znajduje się obrazek, możesz podpiąć EventListener'y load oraz error, jeśli wykona się pierwszy, zwrócisz obrazek, a jeśli drugi to zwrócisz false albo zaimplementować obsługę takiego błędu. Z racji tego, że EventListener wykona kod asynchronicznie, możesz skorzystać z Promise, żeby "zwrócić" obiekt gotowego obrazka (jeśli faktycznie będzie pod podaną ścieżką).

var imageSource = 'http://example.com/image.jpg';

new Promise(function(resolve, reject) {
    var imageElement = document.createElement('img');

    imageElement.addEventListener('load', function() {
        resolve(imageElement);
    });
    imageElement.addEventListener('error', function() {
        reject('Coś jest nie tak z tym obrazkiem...');
    });

    imageElement.src = imageSource;
}).then(function(response) {
    /* pod zmienną response masz gotowy obrazek */
}, function(errorMessage) {
    /* wyświetli w konsoli error przekazany jako parametr w wywołaniu resolve() */
    console.error(errorMessage);
});

 

Comments

Dzięki za podpowiedź.