[Løst] jQuery - Laste eksternt bilde og behandle feilmeldinger

[etse]

Jeg er relativt ny til jQuery og har til nå i hovedsak brukt det kun til enkle manipuleringer av HTML-koden og et ar REST-kall. Akkurat nå har jeg kommet over en problemstilling jeg er litt usikker på om jQuery egentlig egner seg til å håndtere.

 

Jeg har flere eksterne server som brukes til å laste inn bilder. La oss si de har følgende domener: s1.domene.no, s2.domene.no og s3.domene.no

 

Serverene funker på følgende måte:

Når man prøver å requeste et bilde med en URL, vil den følge standard HTTP-regler.

 

Om bilde finnes: Returnerer status 200, samt selve bilde. Ligger og noe interesante metadata om bilde i HTTP-header

Om bilde ikke finnes: Returnerer status 404

Om bilde finnes, men på annen server: status 307 samt URL til en annen server

 

Poenget er at basert på brukerens input ønsker jeg å hente inn et bilde fra en av de eksterne serverene via jQuery, og vise bilde samt noe metadataen som finnes i HTTP-headeren.

 

Hvis den returnerer status 307 ønsker jeg å hente bilde fra neste server (funnet ved å sjekke location i responsen).

 

Eventuelt om jeg får status 404 gi beskjed til brukeren om at dette bilde ikke eksisterer.

 

På grunn av disse, noe spesielle, kravene kan jeg ikke bare manipulere imagetagen på denne måten. Noen som har forslag til hvor jeg kan begynne? Eller egner ikke JS seg til å gjøre noe slikt?

[Terrasque]

JS har ikke tilgang til header data afaik.

 

Man har onerror for img tags, men usikker hvor mye informasjon den egentlig gir fra seg.

[etse]

header-info er greit å få tak i via .getResponseHeader("header_name"), så akkurat det er greit nok. Akkurat nå har jeg gjort noe lignende dette med Ajax:

 

$.ajax({
  type: 'GET',
  url:'s1.domain.com/image.jpg',
  success: function(data, textStatus, request){
    alert(request.getResponseHeader('some_header'));
  }

 

Problemet her er at request-bodyen er selve bilde, og dermed får jeg ikke vist bilde på skjermen. Status 307 blir håndtert enkelt ved at broweseren gjør redirect automatisk. Problemet nå er at jeg må gjøre selve requesten via Ajax for å hente bilde, og ha mulighet til å lese headerinformasjonen.

 

Spørsmålet blir derfor videre: Kan jeg injecte bilde jeg fikk via ajax inn i HTML-siden på noen måte hvis det gir sukksess? F.eks. gjennom å mellomlagre bilde i en form for cache?

[HansLo]

Er ikke noe jQuery ekspert men i svarene til dette spørsmålet på Stack Overflow går de i gjennom noen av mulighetene. Svar #2 ser ut til å svare på hvordan man kan laste bilde-data som kommer i response'n.

 

Mvh Hans

Endret 14. mars 2013 av HansLo

[mads]

Hei,

du kan jo f.eks. gjøre noe som dette:

 

For det første må du legge inn støtte for å kjøre Ajax-request crossdomain (om du ikke har det)

Liten guide: http://www.nczonline...source-sharing/

 

 

function loadImage(imageEl, imageUrl) {
var deferred = $.ajax({
	type: 'HEAD',
	url: imageUrl
});
deferred.when(function(deferredResponse, status) {
	if (status == 'success') {
		$(imageEl).attr('src', imageUrl);
	}
	else {
		$(imageEl).attr('src', "placeholder.png");
	}
});
}

 

I denne funksjonen kjører du en HEAD request i stedet for GET for å sjekke status (mindre overhead). Om du får "success" tilbake kan du injecte bildet, ellers setter du en placeholder elns.

 

Håper det hjelper.

 

Edit:

Men onError og onLoad burde også gjøre susen.

 

$("<img>", { src: imgUrl })
.on("error load", function(e) {
	if (e.type == "load")
		$(this).appendTo(targetEl);
	else
		$(this).attr('src', 'placeholder.png').appendTo(targetEl);
});

 

 

Mvh,

Mads

[etse]

Takker for svar. En HEAD-request sparer meg i hvertfall for å laste over hele bilde 2 ganger, men jeg må fortsatt gjøre 2 requests (en først med Ajax, for så å la browseren gjøre en ny request for å laste ned bilde). Dette åpner opp for litt race-conditions. Hva om bilde ble flyttet i mellomtiden? Siden de ulike serverene er shards i en distribuert system driver de med automatisk kopiering og flytting av filene - så de kan rett og slett bli flyttet uten forvarsel.

 

Men har googlet litt og ser at HTML5-canvas kan være det jeg leter etter. Men sliter litt med å finne ut helt hvordan jeg kan bruke dette her. Hele bildet er sendt i binær-format direkte fra serveren ved sukksess og jeg har dermed bilde i data-feltet i responsen, som et byte-array. Steget videre er å få tegnet denne på en canvas. Noen som har noen gode ressurser på nettet om dette som jeg kan lese meg opp på?

[mads]

Jess, da kan du hente ut bildet i binær-format via ajax.

 

Dog har jeg opplevd problemer med at jQuery sin ajax-metode har litt overhead (ved parsing av resultat osv) Så mulig du burde bruke native XMLHttpRequest.

 

For å sette inn dataene fant jeg en artikkel her:

http://blog.digitalbackcountry.com/2012/01/dealing-with-binary-data-from-a-canvas-object-using-javascript-typedarrays/

 

Mulig det hjelper deg? :-)

 

 

Mvh,

Mads

[etse]

Jess, da kan du hente ut bildet i binær-format via ajax.

 

Dog har jeg opplevd problemer med at jQuery sin ajax-metode har litt overhead (ved parsing av resultat osv) Så mulig du burde bruke native XMLHttpRequest.

 

For å sette inn dataene fant jeg en artikkel her:

http://blog.digitalb...pt-typedarrays/

 

Mulig det hjelper deg? :-)

 

 

Mvh,

Mads

 

Ja dette løste problemet mitt. Fikk opp bilde på skjermen nå via XMLHttpRequest, og tegnet det på en canvas. Gjorde det og enkelt å gå tak i dataene jeg trengte.

[mads]

Ja dette løste problemet mitt. Fikk opp bilde på skjermen nå via XMLHttpRequest, og tegnet det på en canvas. Gjorde det og enkelt å gå tak i dataene jeg trengte.

 

Genialt :-) Lykke til med prosjektet!

 

 

Mvh,

Mads