Canvas Image download?

Hallo liebe FHler.

Ich versuche eine animierte Serie von Bildern herunterzuladen. Problem ist beim normalen herunterladen per Recktsklick speichert er nur den aktuellen Frame. Die Frage ist wie ich jedes Image davon speichern kann. Rausgefunden hab ich bereits das es mit Canvas zu tun hat und habe Recherchen dazu begonnen. Allerdings kenn ich mich in den Bereich nur sehr begrenzt aus. Weiß jemand eine Lösung dafür? Das Problem scheint nicht sonderlich verbreitet zu sein. Über die Entwicklertools und die Netzwerkanalyse ließen sich die Bilder nicht abfangen.

Mfg Bi0

Theoretisch könntest du setTimeout / setInterval / requestAnimationFrame hooken und dann jedesmal wenn die Funktion aufgerufen wird das Canvas abfangen.
Denke aber das ganze wäre sinnvoller wenn du die Datei von der gestreamed wird direkt vom Server (Quelltext) holst, und nicht indem du die einzelnen Frames abfängst.. ist bisschen umständlich finde ich. Wenn du mir per Pm mal nen Link zukommen lässt, kann ichs mir mal anschauen ;) Canvas Bilder abfangen ist wirklich der aller aller aller letzte Weg den ich gehen würde bei sowas.

grüße

Problem ist das die Datei nicht im Quelltext angegeben ist. :/
Wie könnte man das denn realisieren jeden Frame abzufangen? Bzw. mit welchen Tools/Addons?

Hast du mal einen Link als beispiel

Okay.. folgendes :D
Habs mir grad mal angeschaut und kann bis jetzt folgendes sagen:

1) Die Bilder sind sehr wahrscheinlich nicht in ner gif gespeichert, sondern in einzelnen Frames

2) Die Bilder werden von einem speziellen "Player" Script (Javascript) "animiert".
Mit setTimeout / setInterval wird jeweils immer ein frame weitergesprungen, wodurch die Animation entsteht.

Theoretisch könnte man also nur die einzelnen Frames extrahieren, wozu ich dir mit Sicherheit auch ein kleines Script basteln kann.
Das ganze ist dann "the dirty way", aber wenn ich mir anschaue wie dieses player-script gelöst ist kommts mir hoch^^
Total unübersichtlich, anonyme funktionen usw.. schön so gestaltet das man von außen kaum gescheiten Zugriff hat.

In meinem Experiment hab ich jetzt testweise versucht setTimeout / setInterval zu hooken, und bei jedem Aufruf das Canvas auszulesen & in nen Array zu speichern..
So das ich die einzelnen Frames quasi direkt aus dem Canvas klauen kann, und später dann einzelnd anzeigen damit man sie speichern kann.
Habe hier aber noch einige Bugs im Script & ich würde gerne versuchen das anders zu lösen (indem ich das Script was den player darstellt bissel reverse, um z.b die frameanzahl auslesen zu können und solchen spaß).

p.s: Hat sich rausgestellt das die fummelei komplett umsonst war und es enorm leichter ist :D
Die Webseite speichert die Bilder in ner zip Datei die beim Aufruf der Seite entpackt wird, und darin sind alle frames (dafuq..wer entwickelt son Mist?).
Hab en kleines Script gebastelt womit die Zip dann runterladen kannst^^

Mein Script als Bookmark für die Lesezeichen im Browser:

Code:

---

javascript:document.location.href=pixiv.context.ugokuIllustData.src;

---

Mein Script für die Webconsole:

Code:

---

document.location.href=pixiv.context.ugokuIllustData.src;

---

Bietet dann die Zip als Download an, einfach downloaden & alle Frames sind dann dort drine inner zip^^

Aber jetzt wundert es mich jedenfalls nicht mehr wieso das laden der Bilder solch Ewigkeiten benötigt.. is ja klar das wenn er erst die zip entpacken.. ohman :x

grüße

Ja wie simpel eigentlich. :D
Das JS Code hätte ich wahrscheinlich selber nicht hinbekommen. Mich interessiert der Weg wie du rausgefunden hast das die Seite nen Ref braucht. :D
Kann man sicher auch bei anderen Seiten sicher so anwenden. ;)

MFG

Wie ich sehe hast du es jetzt ja hinbekommen^^
Solltest noch Fragen haben.. einfach pm schicken / hier fragen :)

grüße