Browser laden ähnliche url

[redbleek]

Hi, ich bin gerade dabei mit canvas und Javascript rumzuspielen.
Ich möchte quadratische Bilder von meinem Webspace laden und die dann nahtlos auf das canvas geben.
Wenn eine Bilddatei nicht gefunden wurde, dann soll ein Ersatzbild verwendet werden.
Wenn die Datei existiert geht das auch ganz gut aber wenn eine Datei nicht vorhanden ist (zb 50.png gibs nicht) dann nimmt er sich einfach ein Bild das ähnlich heißt.

zum Beispiel wird aus 51.png, 05.png dann später 50.png.
Ich habe rausbekommen, dass das Problem bei Opera und Chrome auftritt.

In den Image Objekten die ich Erstelle sind die korrekten urls drin.

Wie bekomme ich das in den Griff?

 

[struppi]

Mit onerror

 

[threadi]

Würde eher dazu raten den Server dazu zu bringen nicht falsche/ähnliche URLs auszuliefern. Denn der ist daran Schuld, nicht dein Browser. Was man dagegen machen kann hängt vom Server ab, insbesondere vom Webserverdienst (Apache, IIS ..).

 

[redbleek]

ja onerror geht theoretisch schon aber nur wenn der Server was nicht findet, also auch nichts ähnliches findet. Also ich bin bei 1und1, hat da jemand ne Ahnung wie ich das da umstelle?

 

[struppi]

ja onerror geht theoretisch schon aber nur wenn der Server was nicht findet, also auch nichts ähnliches findet.

Der Browser findet nichts "ähnliches" - das was du bescheibst kann so nicht sein.

 

[redbleek]

so wie links schaut es auf dem FireFox aus und so wie Rechts auf Opera die bilder sind von oben links mit 00.png bis unten rechts mit 99.png durchnummeriert.

innerhalb einer doppelten forschleife befülle ich ein array folgendermaßen:

pic = new Array();
	
	for(var i = 0; i<(ch/16);i++){
		for(var j = 0; j<(cw/16);j++){
			co = (i*ch/16)+j;
			pic[co] = new Image(16,16);
			pic[co].src = "r"+i+"s"+j+".png";
			pic[co].onerror= function (evt){this.src="q.png";};
		}	
	}

 

[struppi]

Wie werden die Bilder angezeigt? In dem Code erzeugst du ja nur Image Objekte.
Ausserdem würde ich natürlich in deinem Fall mal eine Debuggingmöglichkeit einbauen. z.b. pic[co].title = 'src:' + pic[co].src; dann siehst du beim Mausover welche Datei der Browser verwendet.

 

[redbleek]

Her mal der ganze code.
am Ende sollen dann die einzelnen Image Obejte auf das Canvas gezeichnet werden, so dass das ganze dann ein großes Bild wird.

inzwischen mache ich das so, das ich per css den Canvashintergrund einfach mit dem Fragezeichen kachele.

var a = 5;
var b = 8;
var c = "test";
var cw;
var ch;
var pic;
var q;
$(document).ready(init);

function init(){
	canvas = $("#canvas");
	con = canvas.get(0).getContext("2d");
	cw=canvas.width();
	ch=canvas.height();
	initCanvas();
	draw();
	akk();
	
};

function akk(){
	$("#var1").html("cw/16 = " + cw/16);
	$("#var2").html("q.src "+q.src);
	//$("#var3").html("c = " + pic[99].src);
	
};

function draw(){
	con.clearRect(0,0,cw,ch);
	for(var i = 0; i<(ch/16);i++){
		for(var j = 0; j<(cw/16);j++){
			con.save();
			con.translate(16*j,16*i);
			co=i*ch/16+j;
			con.drawImage(pic[i*ch/16+j],0,0,16,16);
			con.restore();
		}
	}
};

function initCanvas(){
	//lädt die bilder aus dem verzeichnis
	//wenn bild nicht gefunden ersetze mit fragezeichenbild
	pic = new Array();
	
	for(var i = 0; i<(ch/16);i++){
		for(var j = 0; j<(cw/16);j++){
			//akk();
			co = (i*ch/16)+j;
			pic[co] = new Image(16,16);
			pic[co].src = "r"+i+"s"+j+".png";
			pic[co].onerror= function (evt){this.src="q.png";};
		}	
	}
	
	q = new Image();
	q.src="q.png";
	
};

 

[threadi]

Das ganze wäre unnötig, wenn man meinen Hinweis von oben beachtet. Das Apache Modul spelling ist dafür verantwortlich. Es kann in einer .htaccess-Datei mit

CheckSpelling off

verhindert werden. Ist leider bei vielen 1und1-Servern aktiviert. Siehe:
Apache module mod_speling

 

[redbleek]

und schon funktioniert es!^^ da bin ich aber froh, dass es am ende doch recht simpel war, sehr vielen Dank!

 

[redbleek]

falls es euch interessiert was ich gerade mache:

The biggest multiuser picture!