• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Bild in Canvas aus lokalem Ordner aufrufen

S

sascha83

New member
Hallo,

ich habe mit meinem Code folgendes Problem. Für eine Webanwendung möchte ich lokal in einem Canvas mehrere Bilder laden.
Leider werden mir diese nicht angezeigt. Es funktioniert ausschließlich, wenn ich Bilder verwende die auf einem Server liegen.

Code: 
    var ctx = canvas.getContext('2d');
    var img = new Image();
    for(var i = 0; i < poiName.length; i++) {
        if (canvas.getContext) {
           img.onload = function() {
                ctx.drawImage(img,linkX,linkY);
            }
            img.src = '../img/track.png'; 
        }
    }

Ich bin für jede Hilfe dankbar.

VG
 
Das ist ein Sicherheitsfeature. Das kannst du nicht direkt umgehen. ABER wenn du deine Bilddatei über die File-API holst, geht das:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
</head>
<body>
<input type="file" id="file"><br>
<canvas id="canvas"></canvas>
<script type="text/javascript" src="/kkjs/modules/kkjs.load.js"></script>
<script type="text/javascript">
(function(){
	var canvas = document.getElementById("canvas");
	var context = canvas.getContext("2d");
	var file = document.getElementById("file");
	var reader = new FileReader();
	reader.addEventListener("load", function(){
		var img = new Image();
		img.onload = function(){
			canvas.width = img.width;
			canvas.height = img.height;
			context.drawImage(img, 0, 0);
		}
		img.src = this.result;
		
	});
	file.addEventListener("change", function(){
		reader.readAsDataURL(this.files[0]);
	}, false);
}());
</script>
</body>
</html>
- getestet in FF, Chrome und IE10.

- - - Aktualisiert - - -

Wäre ja noch schöner, wenn jede Webseite die Bilder auf deiner lokalen Maschine auslesen könnte.
 
Ok, vielen Dank. Ja, das wäre in der Tat nicht sehr sinnvoll ;) Ich habe die Bilder jetzt einfach auf einem Server abgelegt
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben