Canvas Funktion drawImage überschreiben?

[Cystasy]

Hey,
Gibt es eine Möglichkeit die Funktion CanvasRenderingContext2D.prototype.drawImage zu überschreiben?
Oder Beispielweise bei einem Aufruf der selbigen die width & height eines Bildes das auf das Canvas gezeichnet wird zu verändern?
Ich habe bereits versucht sie zu hooken, allerdings werden dort komischerweise keine Width & Height als Parameter übergeben, nur X und Y Position sowie das Image() Objekt. Es lässt sich also die Größe nicht beeinflussen durch den Hook - weiß da jemand wie ich das umsetzen kann?

Aktuell sieht mein Hook folgendermaßen aus:

drawImageVR = CanvasRenderingContext2D.prototype.drawImage;

CanvasRenderingContext2D.prototype.drawImage = function()
{
 //Diese Argumente möchte ich ändern können
 arguments[0] = arguments[0];
 arguments[1] = arguments[1];
 arguments[2] = arguments[2];
 arguments[3] = arguments[3];
 arguments[4] = arguments[4]; 
 arguments[5] = arguments[5];
 arguments[6] = arguments[6];
 arguments[7] = arguments[7]; 
 arguments[8] = arguments[8];
 arguments[9] = arguments[9];
 
 drawImageVR.apply(this, arguments);
}

Hier sind beim console.log auf arguments nur arguments[0] bis arguments[2] definiert, der Rest ist undefined.
Und das obwohl der Aufruf von drawImage() explizit mehr als 3 Argumente vom Hauptcode hat.

Die Funktion createElement z.b habe ich schon hooken können damit ich darüber erstellte Canvas abgreifen kann. Ziel des ganzen Unterfangens ist es die wichtigsten Canvas Funktionen zu Hooken, so das ich das zeichnen beliebiger Canvas-Funktionen in fremden Apps (HTML5 Games z.b mit Cardboard Funktion ausstatten) steuern kann. Der Javascriptcode der das ganze hooked wird übrigens als erstes geladen damit es zu keinen Problemen kommt.

Ich bin mir da leider auch nicht zu 100% sicher ob ich überhaupt die richtige Funktion / Schnittstelle hooke, weil ich mich bisher nicht so wirklich gut mit der Browser-Schnittstelle / Interfaces auskenne (außerhalb von window,navigator & co.) .. sollte ich das falsche Interface gehooked haben wär es cool wenn mir jemand helfen könnte das richtige zu finden. Normal müsste es aber passen da ich die X,Y Position des drawImage beeinflussen kann.

p.s: Lese hier grade das es read-only ist - gibt es da dann alternative Möglichkeiten wie ich die Argumente beeinflussen kann? Der eigendliche Hook funktioniert ja scheinbar.

grüße

[Jut4h.tm]

Es währe einfacher wenn du kurz schreibst wofür das ist, vielleicht geht es ja auch einfacher :-) mit dem überschrieben von HTML5 Funktionen habe ich auch schon einige Erfahrungen gemacht und meistens funktioniert es nicht richtig

Die Funktion createElement z.b habe ich schon hooken können damit ich darüber erstellte Canvas abgreifen kann. Ziel des ganzen Unterfangens ist es die wichtigsten Canvas Funktionen zu Hooken, so das ich das zeichnen beliebiger Canvas-Funktionen in fremden Apps (HTML5 Games z.b mit Cardboard Funktion ausstatten) steuern kann. Der Javascriptcode der das ganze hooked wird übrigens als erstes geladen damit es zu keinen Problemen kommt.

Also um welches Game geht es kannst es auch per PM schicken

[Cystasy]

Es währe einfacher wenn du kurz schreibst wofür das ist, vielleicht geht es ja auch einfacher :-) mit dem überschrieben von HTML5 Funktionen habe ich auch schon einige Erfahrungen gemacht und meistens funktioniert es nicht richtig



Also um welches Game geht es kannst es auch per PM schicken

Es handelt sich hier um kein spezifisches Game, ich benutze nur zum entwickeln des ganzen ein Demo Spiel ( http://www.lostdecadegames.com/how-t...5-canvas-game/ ) was RPG mäßig aufgebaut ist. Das ist aber erstmal unerheblich (mehr als drawImage macht es Canvas-mäßig nicht groß).
Und diesen drawImage Aufruf möchte ich hooken um die größe (width+height) der Bilder die damit gezeichnet werden selbst zu bestimmen (ohne den Spiele-Quellcode zu ändern).

Endziel des ganzen soll es sein, eine Art Library / Javascript-Datei zu entwickeln die es Spiele-Entwicklern (und mir ) ermöglicht ihr Canvas Spiel mit nur einer Codezeile (einbinden der JS Datei) Virtual Reality tauglich zu machen (Cardboard mäßig..weißt schon, 2 Bilder die nebeneinander sind). Um dies zu erreichen muss ich aber verschiedene Canvas & Javascript Funktionen hooken und manipulieren um dann jeweils das gewünschte zu erreichen^^ Das ganze soll eine Art Zusatz zu meinem anderem Cardboard-Projekt werden.

grüße

[Jut4h.tm]

Ja das ganze wird aufgrund von Securityfeatures der Browser schwer und darüber hinaus sind diese Funktionen ja nativ. Am einfachsten wäre es denke ich das fertige Bild zu klonen.
Du könntest in dem callback von requestAnimationFrame https://developer.mozilla.org/en-US/...AnimationFrame das Bild kopieren und dann selbst weiterverarbeiten. Das Original bild kannst du dann ja verstecken.

[Cystasy]

Ja das ganze wird aufgrund von Securityfeatures der Browser schwer und darüber hinaus sind diese Funktionen ja nativ. Am einfachsten wäre es denke ich das fertige Bild zu klonen.
Du könntest in dem callback von requestAnimationFrame https://developer.mozilla.org/en-US/...AnimationFrame das Bild kopieren und dann selbst weiterverarbeiten. Das Original bild kannst du dann ja verstecken.

Wäre eine Idee, jepp.. stimmt.
Wobei ich sagen muss das ich auch schon native Funktionen hooken konnte, daran scheitert es nun nicht.
Man kann zwar die eigendliche native Funktion nicht in ihrer Substanz ändern, aber man kann die Parameter ändern + zusätzlichen Code ausführen.
Das Problem ist hier bei dieser Funktion nur, das nur die ersten 3 Parameter vorhanden sind im Hook anstelle aller die beim Aufruf übergeben wurden.
Die X,Y Koordinate und das eigendliche Bild was gezeichnet wird kann ich ja austauschen - das funktioniert.
Deshalb frage ich mich halt nur wieso die anderen Parameter dann nicht klappen. Was sollte die von X,Y, Image() unterscheiden?
Finde das ziemlich komisch^^ Aber der Ansatz mit dem requestAnimationFrame hooken und dann das Bild abgreifen und doppelt zu zeichnen ist gut, werde mal schauen ob das gut funktioniert (ohne das das Bild dadurch pixelig wird durch das verkleinern).

grüße