• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Base64-File über JS in Canvas laden

Status
Für weitere Antworten geschlossen.
Y

yss

Mitglied
Hey
Ich habe im Moment eine .bin Datei, in welcher ein Bild im Base64-Format ist. Die Datei habe ich hier erstellt:Motobit. Nun habe ich ein Script in einem Buch gefunden, mit welchem man dieses in ein Canvas laden kann, doch leider funktioniert es nicht.
Hier der Code:
HTML: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function test(){
	var canvas = document.getElementById('mycanvas');
	if(canvas.getContext){
		var ctx = canvas.getContext('2d');
		var img = new Image();
		img.src = 'base64.bin';
		img.onLoad = function(){
			ctx.drawImage(img,10,10);
		}
	}
}
</script>
</head>
<body onload="test()">
	<canvas id="mycanvas" width="500" height="300"></canvas>
</body>
Wenn ich das Thema bei Google eingebe, dann kommt immer nur, wie man den Inhalt eines Canvas in Base64-Format speichert.
 
gleich direkt mal eine frage zu canvas:
ist es möglich damit auch 3d objekte zu erstellen?

ich könnte zwar für linien in die tiefe die dritte dimension berechnen, aber gibt es vielleicht eine möglichkeit mit 2 koordinaten, statt zwei zu arbeiten? finde zum thema 3d canvas nicht wirklich was bei google
 
Da bin ich mir nicht sicher, aber du kannst ja auch durch 2d 3d machen, wie in Mathe mit dem Haus. Das Dach nach hinten ist nur ne Linie in 2d, aber es sieht aus wie 3d.
 
ja das meinte ich. die dritte dimension kann ich mir ja berechnen. dachte nur es gibt vielleicht eine möglichkeit direkt 3d anzuwenden. hab mich gerade mal mit canvas beschäftigt und habe gesehen, dass man den befehl
Code: 
canvas = canvas.getContext('2d');
verwendet. dachte man könnte vielleicht auch mit
Code: 
canvas = canvas.getContext('3d');
irgendwie arbeiten^^
 
WebGL sucht ihr: OpenGL

Zum Thema:
Ich glaube nicht, dass drawImage direkt mit einem base64-kodierten Bild umgehen kann. Wenn das Bild also in Base64 vorliegt, würde ich den Inhalt einfach mittels XHR requesten und dann das ganze in eine data:-URL stecken:
Code: 
var img = new Image(); img.src = 'data:image/png;base64,' + imageData;
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben