- Registriert
- 3 Aug. 2014
- Beiträge
- 28.573
Hallo,
ich bin gerade dabei ein Tool zu entwickeln das mittels eines Canvas Elements Markup formatiert darstellen soll.
Das funktioniert soweit auch sehr gut, aber ich habe ein Problem Bilder mittels SRC Attribute Einbindung, dynamisch in das Canvas einzufügen, diese sind nicht beim Laden der Seite im DOM eingebunden, sondern "sollten" während des laufenden Skripts gezeichnet werden.
Momentaner Stand ist, das die Bilder einfach nicht dargestellt werden, außer in Firefox (hier Beta Version) - nach einem Neuladen der Seite ohne den Cache neu zu generieren, in Chrome wird zum Beispiel überhaupt nichts gezeigt, auch nicht nach einem Neuladen.
Ich weiß das es wieder etwas umständlich ist, aber das Projekt liegt auf Github unter dieser URL:
https://github.com/jrie/CanvasLister
Zur Info, um das Projekt zu erhalten, einfach "Download als Zip" auswählen, dann die "Canvaslister.html" ausführen.
*** Lösung:
Die Bilddarstellung wird mittels requestAnimationFrame Aufrufe nach eigentlicher Text Formattierung nachgeholt, so das diese erst wirklich als geladen gelten, wenn dem Browser die Bildabmessung in Höhe und Breite zur Verfügung stehen. Das funktioniert testweise gut in IE10, Chrome und Firefox.
Das Nachträglich erst die Bilder mit Abmessungen zur Verfügung stehen, nachdem das Layout berechnet wurde, wirft ein paar Probleme auf, so kann das Bild beispielsweise nicht nachträglich automatisch auf Höhe und Breite mit Auto Wert Angabe platziert werden, also volle Breite bei variabler Höhe.. ist also noch work in progress.
Auch wurde Bug im Parsergenarator behoben, der es nicht fertig brachte, simple Nacheinander gesetzte Tags wie "b" / "i" und "bi" korrekt zu bearbeiten. Dies ist nun behoben und auf Github wie alle anderen Änderungen.
........
Die JS Datei um die es geht ist "canvasLister_phantom_image.js" - und die Routine in der die Bilder geladen und zugewiesen werden befindet sich zwischen den Zeilen, 890 bis 1028. Das Bild, habe ich testweise, in Zeilen 1013 und 1014 aus dem DOM holen und dann zeichnen lassen wollen - der Workaround funktioniert aber so leider nicht - auch über 'var img = new Image(); img.src = "Bilddatei.jpg"', auch enthalten, wird nichts dargestellt.
Auch beigefügt ein Screenshot, wie die Darstellung aussieht, das ist aber in Firefox (erst nach zweitem Laden der CanvasLister.html Datei)
Ich habe versucht das ganze mit "Blocker"-Funktionen zu verzögern, aufgrund der Vermutungen das:
Die Bilder nicht im DOM sind sofern diese mit der "drawImage" Funktion ausgelesen und gezeichnet werden sollen, das heißt der Befehl hat keine Bildinformationen zu diesem Zeitpunkt, da das Bild nicht vollständig verfügbar ist und die SRC Zuweisung noch nichts geladen hat?
Firefox scheint hierbei die Bilder dann nach einem Neuladen im Cache zu haben und stellt diese dann auch da durch die "drawImage" Funktion da diese "bekannt zu seinen scheinen"..
Ich hatte gehofft das ich den Browser so lange mit "requestAnimationFrame" hinhalten könnte, bis das Bild wirklich geladen ist, aber die Implementierung des Befehls scheint erst aktiv zu werden, nachdem die Seite komplett geladen ist - das, meine ich, sieht man in Firebug ganz gut an den Consolen Ausgaben da diese erst nach Ablauf des Skripts triggern, nachdem das gesamte Skript abgearbeitet ist.
Eine Idee das zu lösen wäre die Implentierung so zu gestalten, das die Images zuerst ausgelesen und in den DOM geschrieben werden, dann nach einem Interval Check und "sindAlleBilderGeladen?" Variable dann die Funktionen zu starten die das Markup ausließt und darstellt.... das würde vermutlich auch so funktionieren, das hatte ich in dem "Connect" Projekt bei einem blockieren Loadercheck gemacht - aber in diesem Fall wäre der Aufwand sehr groß und ich würde hoffen das sich dass irgendwie eleganter "in der Funktion/Skript Ablauf" ohne Umwege gestalten lassen könnte.
Im anderen Projekt sieht die blockende Laderoutine etwas so aus (Auszug):
[src=javascript]
var loaderCheck = setInterval(checkFinishedLoad, 500);
function checkFinishedLoad() {
if (!animationsLoading && !loadInProgress) {
clearInterval(loaderCheck);
window.requestAnimationFrame(mainloop);
}
}
[/src]
Die Variablen werden hier dann gesetzt:
[src=javascript]
function createAnimation(imgUrl, ... , returnLoaded, .....) {
var img = new Image();
img["src"] = imgUrl;
....
if (returnLoaded === true) {
animationsLoading = false;
}
}
[/src]
Hier werden die Bilder auch korrekt mittels des SRC zugewiesen und dann auch dargestellt (nachdem?) der erste "requestAnimationFrame" die Hauptschleife "mainloop" aufruft.
In dem aktuellen Fall ist das Skript allerdings noch in der "Initalisierungsphase" (?) so scheint es jedenfalls.
Wäre sehr dankbar über Ideen/Ansätze!
*Zusatz:
Ich hatte eben mal probiert ob es möglich wäre die, scheinbar auf den Stapel gelegte requestAnimationFrame Aufrufe, die scheinbar für die Abarbeitung auf einen Stapel gelegt werden, nachdem der DOM geladen ist, was man in Firefox an den Logs sehen kann das diese noch abgearbeitet werden, mittels "window.requestAnimationFrame(function)" zu cachen - das würde vermutlich gehen, aber die Funktion unterstützt keine Parameterübergabe, ansonsten wäre das ideal um die Bilder nachträglich einbauen zu lassen wenn man die Positionen et cetera übergeben könnte..
Die Bildwerte mit Name der Src, Position, Größe und Co in einem Array zu speichern und dann einen windows.requestAnimationFrame Aufruf zu machen der die Bilder dann mit drawImage in das Canvas zeichnet funktioniert leider auch nicht nach einem Versuch. Vielleicht müssen mehrere Frames verstreichen bis die Pixel-Daten wirklich verfügbar sind?
ich bin gerade dabei ein Tool zu entwickeln das mittels eines Canvas Elements Markup formatiert darstellen soll.
Das funktioniert soweit auch sehr gut, aber ich habe ein Problem Bilder mittels SRC Attribute Einbindung, dynamisch in das Canvas einzufügen, diese sind nicht beim Laden der Seite im DOM eingebunden, sondern "sollten" während des laufenden Skripts gezeichnet werden.
Momentaner Stand ist, das die Bilder einfach nicht dargestellt werden, außer in Firefox (hier Beta Version) - nach einem Neuladen der Seite ohne den Cache neu zu generieren, in Chrome wird zum Beispiel überhaupt nichts gezeigt, auch nicht nach einem Neuladen.
Ich weiß das es wieder etwas umständlich ist, aber das Projekt liegt auf Github unter dieser URL:
https://github.com/jrie/CanvasLister
Zur Info, um das Projekt zu erhalten, einfach "Download als Zip" auswählen, dann die "Canvaslister.html" ausführen.
*** Lösung:
Die Bilddarstellung wird mittels requestAnimationFrame Aufrufe nach eigentlicher Text Formattierung nachgeholt, so das diese erst wirklich als geladen gelten, wenn dem Browser die Bildabmessung in Höhe und Breite zur Verfügung stehen. Das funktioniert testweise gut in IE10, Chrome und Firefox.
Das Nachträglich erst die Bilder mit Abmessungen zur Verfügung stehen, nachdem das Layout berechnet wurde, wirft ein paar Probleme auf, so kann das Bild beispielsweise nicht nachträglich automatisch auf Höhe und Breite mit Auto Wert Angabe platziert werden, also volle Breite bei variabler Höhe.. ist also noch work in progress.
Auch wurde Bug im Parsergenarator behoben, der es nicht fertig brachte, simple Nacheinander gesetzte Tags wie "b" / "i" und "bi" korrekt zu bearbeiten. Dies ist nun behoben und auf Github wie alle anderen Änderungen.
........
Die JS Datei um die es geht ist "canvasLister_phantom_image.js" - und die Routine in der die Bilder geladen und zugewiesen werden befindet sich zwischen den Zeilen, 890 bis 1028. Das Bild, habe ich testweise, in Zeilen 1013 und 1014 aus dem DOM holen und dann zeichnen lassen wollen - der Workaround funktioniert aber so leider nicht - auch über 'var img = new Image(); img.src = "Bilddatei.jpg"', auch enthalten, wird nichts dargestellt.
Auch beigefügt ein Screenshot, wie die Darstellung aussieht, das ist aber in Firefox (erst nach zweitem Laden der CanvasLister.html Datei)
Ich habe versucht das ganze mit "Blocker"-Funktionen zu verzögern, aufgrund der Vermutungen das:
Die Bilder nicht im DOM sind sofern diese mit der "drawImage" Funktion ausgelesen und gezeichnet werden sollen, das heißt der Befehl hat keine Bildinformationen zu diesem Zeitpunkt, da das Bild nicht vollständig verfügbar ist und die SRC Zuweisung noch nichts geladen hat?
Firefox scheint hierbei die Bilder dann nach einem Neuladen im Cache zu haben und stellt diese dann auch da durch die "drawImage" Funktion da diese "bekannt zu seinen scheinen"..
Ich hatte gehofft das ich den Browser so lange mit "requestAnimationFrame" hinhalten könnte, bis das Bild wirklich geladen ist, aber die Implementierung des Befehls scheint erst aktiv zu werden, nachdem die Seite komplett geladen ist - das, meine ich, sieht man in Firebug ganz gut an den Consolen Ausgaben da diese erst nach Ablauf des Skripts triggern, nachdem das gesamte Skript abgearbeitet ist.
Eine Idee das zu lösen wäre die Implentierung so zu gestalten, das die Images zuerst ausgelesen und in den DOM geschrieben werden, dann nach einem Interval Check und "sindAlleBilderGeladen?" Variable dann die Funktionen zu starten die das Markup ausließt und darstellt.... das würde vermutlich auch so funktionieren, das hatte ich in dem "Connect" Projekt bei einem blockieren Loadercheck gemacht - aber in diesem Fall wäre der Aufwand sehr groß und ich würde hoffen das sich dass irgendwie eleganter "in der Funktion/Skript Ablauf" ohne Umwege gestalten lassen könnte.
Im anderen Projekt sieht die blockende Laderoutine etwas so aus (Auszug):
[src=javascript]
var loaderCheck = setInterval(checkFinishedLoad, 500);
function checkFinishedLoad() {
if (!animationsLoading && !loadInProgress) {
clearInterval(loaderCheck);
window.requestAnimationFrame(mainloop);
}
}
[/src]
Die Variablen werden hier dann gesetzt:
[src=javascript]
function createAnimation(imgUrl, ... , returnLoaded, .....) {
var img = new Image();
img["src"] = imgUrl;
....
if (returnLoaded === true) {
animationsLoading = false;
}
}
[/src]
Hier werden die Bilder auch korrekt mittels des SRC zugewiesen und dann auch dargestellt (nachdem?) der erste "requestAnimationFrame" die Hauptschleife "mainloop" aufruft.
In dem aktuellen Fall ist das Skript allerdings noch in der "Initalisierungsphase" (?) so scheint es jedenfalls.
Wäre sehr dankbar über Ideen/Ansätze!
*Zusatz:
Ich hatte eben mal probiert ob es möglich wäre die, scheinbar auf den Stapel gelegte requestAnimationFrame Aufrufe, die scheinbar für die Abarbeitung auf einen Stapel gelegt werden, nachdem der DOM geladen ist, was man in Firefox an den Logs sehen kann das diese noch abgearbeitet werden, mittels "window.requestAnimationFrame(function)" zu cachen - das würde vermutlich gehen, aber die Funktion unterstützt keine Parameterübergabe, ansonsten wäre das ideal um die Bilder nachträglich einbauen zu lassen wenn man die Positionen et cetera übergeben könnte..
Die Bildwerte mit Name der Src, Position, Größe und Co in einem Array zu speichern und dann einen windows.requestAnimationFrame Aufruf zu machen der die Bilder dann mit drawImage in das Canvas zeichnet funktioniert leider auch nicht nach einem Versuch. Vielleicht müssen mehrere Frames verstreichen bis die Pixel-Daten wirklich verfügbar sind?
Zuletzt bearbeitet: