javascript und php in ein script

  • habe mal etwas gegoogelt und gelesen das man php irgendwie im javascript laufen zu bekommt.


    wollte mal paar versuche machen wobei man php brauch.(würde mir da fertigen code suchen weil php stehe ich auf 6+).


    den code soll dann in javascript ausgeführt werdeen zb bei fiddle.


    da php ja serverseitig ist geht das ja nicht so einfach.


    das soll mit ayax irgendwie möglich sein.


    nehmen wir mal das.

    wie würde ich das in ein fiddle zum laufen bekommen?

    weil so gehts ja nicht

  • Das ist nicht möglich, da PHP auf einem Server ausgeführt werden muss.


    Das, was du vermutlich meinst, ist, mit Ajax z.B. einen Request an irgendeinen Server mit PHP zu senden, welcher dann Daten zurückgibt, die du mit JS verarbeiten kannst.


    Beispiel:


    Eine API für den aktuellen Bitcoin-Stand. Auf diese kannst du z.B. per JS und XMLHttpRequest zugreifen, dir Daten holen und diese dann zu einem Chart verarbeiten.


    Genau das habe ich letzten Monat mal gemacht: https://codepen.io/jr-cologne/pen/BmLGZN


    Code ist jetzt vielleicht nicht der allerbeste, aber das Prinzip sollte klar werden.

  • ich wollte das hier versuchen.

    https://www.lima-city.de/thread/farbe-ermitteln

    mit javascript alleine geht das wohl noch nicht und da währe php wohl ne lösung.

    das heist um sowas nachzubauen müsste das php script auf den server liegen?

    am besten den eigenen?


    alsofält diese funktion wohl flach. vieleicht findet man noch nee andere lösung wie es mit javascript geht, das world wide web ist ja gross

  • Doch, das geht mit Javascript, wenn Du HTML5-Canvas verwendest, am besten mit jCanvas. Und wenn es live sein soll, d. h. der Farbcode soll laufend aktualisiert werden, wenn man die Maus bewegt, scheidet PHP aus.

  • PHP scheidet insofern nicht komplett aus, dass man sich wie bei Basti's-Link ein PHP-Script erstellen kann, dass die Farbe des Bildes an einem bestimmten Punkt ermittelt und z.B. als JSON zurückgibt.


    Anschließend feuert man bei Klick auf den entsprechenden Pixel ein Ajax-Request, der die Farbe dann vom PHP-Script einholt.


    Möchte man es bei Hover machen, würde das aus Performance-Gründen nicht funktionieren.

    Dies könnte man dann vielleicht so lösen, dass man beim Laden der Seite (oder wann auch immer) einen einzigen Request schickt und das Script stattdessen für jeden einzelnen Bildpunkt die Farbe ermittelt und nicht nur für einen bestimmten. Das Ergebnis wäre dann eine ordentliche Menge an JSON-Daten.


    Für kleine Bilder sollte das eventuell noch funktionieren. Bei großen wird's dann wahrscheinlich auch sehr kritisch. :D


    Wäre eigentlich mal interessant, das auszuprobieren.


    PS: Möchte übrigens nicht behaupten, dass eine Lösung mit PHP praktikabel ist. Besser ist definitiv die von Sempervivum genannte JS-Lösung.

  • Nochmal zu pos 4 und 5. das esmit canvas gehen soll habe ich auch schon gelesen,aber leider nix gefunden was mir helfe würde so ein script zu erstellen.


    und man liest andauernd das es wie ihr sagt mit jason und php alles gehen soll.aber das fällt für mich sowieso flach weil php stehe ich noch auf 6. um sowas mit php zu bauen müsste ich erstmal ein serverplatz haben,oder wie wahr das ?.nagut ,wollen wir mal sehen wer als erstes so ein script baut oder findet,weil ein fertiges script habe ich bis jetzt noch nicht gefunden,zumindest eins was auch geht

  • Hallo Basti, mit jCanvas funktioniert es so:

    http://ulrichbangert.de/div/we…vascript/colorpicker.html

    (die Werte werden in der Console ausgegeben)

    Leider funktioniert das nicht unter jsfiddle, sieh dir die Console an:
    https://jsfiddle.net/Sempervivum/5nt1pgq9/4/

    Dieser Beitrag wurde bereits 2 Mal editiert, zuletzt von Sempervivum ()

  • ich muss mal meine erste versuche raussuchen,sohalbwegs wahr ich ja in der richtung aber trotzdem weit weg .hätte nicht gedacht das es mit so ein paar zeilen geht. wollte das versuchen mit clickevent und alert machen,aber wie du schon sagtest da spielt fiddle nicht mit ..komischerweise sagt fiddel auch ein fehler und nicht die werte.bei dein bild ist alles bestens.

    was hat fiddel nur für sorgen das es da nicht geht

  • Das liegt nicht an jsfiddle sondern ist eine generelles Problem: Der Browser lässt nicht zu dass ein Bild von einer anderen Domain ausgelesen wird. Sieh in die Console, dort wird eine entspr. Fehlermeldung ausgegeben. Stichwort cross-origin-Zugriff.

    Ja, mit jCanvas ist der Code sehr kurz, weil man keine Rechnerei mit der Mausposition braucht.

  • ja das mit den cross ding das hatte ich ja letztens mit den iframe schon das geht ja auch nicht, nurverstehe ich das mit den bild irgendwie nicht weil das bild wird ja schon angezeigt obwohl es von einer anderen hp ist. es ist doch jetzt sogesehen in meiner cache auf den rechner,sollte es dann nicht irgendwie gehen.

    kann man mit javascript da überhaupt drauf zugreifen?

    oder bild in cookie speichern,fals das überhaupt geht?

  • Es ist nicht so, dass technisch kein Zugriff auf das Bild möglich ist (wie Du richtig schreibst, ist es ja im Cache und im Speicher), sondern der Browser blockt den Zugriff, sobald man versucht, das Bild auf irgend eine Weise auszulesen. In Cookie oder Local-Storage speichern, geht auch nicht, da man dazu das Bild zunächst auslesen müsste.

    Der Zugriff ist nur möglich, wenn das Bild auf der selben Domain liegt wie die HTML-Seite.

  • also fält diese function als greasmonkeyscrkipt wohl flach.

    Nee eigentlich nicht weil ich lese doch dann das bild aus auf desen seite ich ja bin ,das sollte ja gehen.

    Auser wennseite XY selber fremdbilder anzeigt,die solten sich dann wieder nicht auslesen,richtig?


    hätte ich das alles vorher gewusst,weil vieleicht hatte ich doch schon so ein script gefunden was geht ,aber hatte nie was angezeigt bekommen,jetzt weiss ich auch warum,fals daa ein script bei wahr was geht,weil im netz standen paar die angeblich gingen aber fiddel kam ja nix..


    also wenn ich eine möglickeit finde ein bild in fiddel auszulesen dann bin ich der held,richtig:?:

  • Zitat

    Auser wennseite XY selber fremdbilder anzeigt,die solten sich dann wieder nicht auslesen,richtig?

    Genau. Und wenn Du es schaffst, das Bild in jsfiddle wirklich auszulesen, bist Du der Held.

    Es gibt da Mittel und Wege mit PHP, aber das wird beim fiddle auch nicht helfen, weil man ein PHP-Skript ja dort nicht hosten kann und wenn es woanders liegt, hat man die gleichen Probleme mit Cross-Origin. Es sei denn, man gibt es frei.

  • das verstehe ich jetzt nicht ganz.hast du das bild in ein php code oder so was umgewandelt? wenn man die bildadresse so aufrufen tut kommen ja nur komische buchstabden und zeichen raus? was ist das? könnte man dann theoretisch jedes bild was auf PHP endet so auslesen oder wie soll man das verstehen mit php? wie gesagt mit php kenne ich mich gar nnicht aus

  • Zitat

    wenn man die bildadresse so aufrufen tut kommen ja nur komische buchstabden und zeichen raus?

    Versuche es jetzt noch Mal. Das ganze ist Neuland für mich und ich hatte den Mime-Type noch nicht angegeben, der dem Browser mitteilt, dass es sich um ein jpeg-Bild handelt.

    Das PHP-Skript liest das Bild aus der Datei und gibt es unverändert aus. Hier hat man jedoch die Möglichkeit, einen Header anzugeben, der das Bild für Cross-Origin-Zugriff frei gibt.

    PHP
    1. <?php
    2. header("Access-Control-Allow-Origin: https://fiddle.jshell.net");
    3. header('Content-Type: image/jpeg');
    4. die(file_get_contents("images/bild1.jpg"));
    5. ?>

    Das Ganze kann man auch über die .htaccess-Datei erreichen.

  • Bevor ihr euch ganz auf fiddle eingeschossen habt, mal eine Zwischenfrage:

    Wenn ich das Script aus den Teilen zusammenbaue, wird die Funktion drawImage als Fehler gemeldet, da 3 Parameter mindestens erforderlich sind.


    Wie müsste ich das umbauen, damit drawImage() mit Image, width, height aufgerufen wird (ok, das ist noch klar), und dann die Pixel-Farbabfrage funktioniert? Scheinbar baut fiddle da intern schon so einiges um, um das zum Laufen zu bringen.


    P.S.:jQuery habe ich bereits eingebaut.

  • Das Skript, das ich gepostet habe, benutzt jCanvas. Hast Du das auch eingezogen? Die Funktion drawImage gibt es, leider unter dem selben Namen, auch in der normalen API für Canvas, wo sie mindestens drei Parameter benötigt.