Ergebnis 1 bis 5 von 5
  1. #1
    Wiederbelebt Avatar von Cystasy
    Registriert seit
    08.05.2015
    Beiträge
    685

    Standard Canvas Funktion drawImage überschreiben?

    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:

    Code:
    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
    Geändert von Cystasy (17.06.2015 um 17:11 Uhr)

  2. #2
    Moderator Avatar von Jut4h.tm
    Registriert seit
    25.06.2006
    Beiträge
    792

    Standard AW: Canvas Funktion drawImage überschreiben?

    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
    Geändert von Jut4h.tm (17.06.2015 um 22:25 Uhr)

  3. #3
    Wiederbelebt Avatar von Cystasy
    Registriert seit
    08.05.2015
    Beiträge
    685

    Standard AW: Canvas Funktion drawImage überschreiben?

    Zitat Zitat von Jut4h.tm Beitrag anzeigen
    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
    Geändert von Cystasy (17.06.2015 um 23:25 Uhr)

  4. #4
    Moderator Avatar von Jut4h.tm
    Registriert seit
    25.06.2006
    Beiträge
    792

    Standard AW: Canvas Funktion drawImage überschreiben?

    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.

  5. #5
    Wiederbelebt Avatar von Cystasy
    Registriert seit
    08.05.2015
    Beiträge
    685

    Standard AW: Canvas Funktion drawImage überschreiben?

    Zitat Zitat von Jut4h.tm Beitrag anzeigen
    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

Ähnliche Themen

  1. [S] Script etc zum überschreiben der HDDs
    Von L@M3R im Forum Anwendungssoftware
    Antworten: 8
    Letzter Beitrag: 17.04.2012, 17:36
  2. VB 2010 - Datei umändern oder überschreiben
    Von trisn im Forum .NET Sprachen - Techniken
    Antworten: 7
    Letzter Beitrag: 29.06.2010, 20:13
  3. PHP: FTP-Funktion
    Von n00kie im Forum PHP
    Antworten: 9
    Letzter Beitrag: 15.06.2009, 15:16
  4. Sicheres Löschen: Einmal überschreiben genügt
    Von sh4w im Forum Globale News / Szene News
    Antworten: 18
    Letzter Beitrag: 14.03.2009, 20:29

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •