javascript und php in ein script

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.

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.

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.

Habe dazu auch mal eine Frage.

In diesen Thema. jQuery Text einfügen geht nicht

hat einer ein sweetalert Script in PhP eingebunden.

Kann man Javascripte so einfach in PHP einbinden,oder müssen die eingebundene Scripte auch in PHP gecodet sein?

Ja, kann man. PHP lässt sich nämlich ganz einfach mit HTML mischen:

https://www.php-kurs.com/php-und-html-mischen.htm

Hallo Basti, mit jCanvas funktioniert es so:

    <canvas width="800" height="600"></canvas>
    <script>
        cv = $("canvas");
        cv.drawImage({
            source: "images/text-color.png",
            layer: true,
            x: 0, y: 0, fromCenter: false,
            mousemove: function (layer) {
                cv.setPixels({
                    x: layer.eventX, y: layer.eventY,
                    width: 1, height: 1,
                    each: function (px) {
                        console.log(px.r, px.g, px.b);
                    }
                });
            }
        });
    </script>

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/

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.

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.

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.

Ich schrieb ja, dass es mit PHP Mittel und Wege gibt:

https://jsfiddle.net/Sempervivum/5nt1pgq9/8/

Funktioniert allerdings nicht mit jedem x-beliebigen Bild.

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
header("Access-Control-Allow-Origin: https://fiddle.jshell.net");
header('Content-Type: image/jpeg');
die(file_get_contents("images/bild1.jpg"));
?>

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.