javascript und php in ein script

  • Jetzt habe ich jCanvas eingebaut, aber bekomme Zugriffsfehlermeldung:

    Zitat

    has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://fiddle.jshell.net' that is not equal to the supplied origin.

    Das könnte mit dem gesendeten header zusammenhängen:

    Zitat
    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. ?>

    Liegt das Bild denn unter /images/bild1.jpg ? Dann probiere ich es mal damit.

  • Wenn man sich den ersten Header ansieht, ist sofort klar, warum: Ich habe den Zugriff nur für fiddle frei gegeben.

    Ja, das Bild liegt unter images/bild1.jpg. Du kannst es von dort laden, wirst aber Probleme mit tainted canvas bekommen.

  • Stimmt.

    Entweder gibt es gleich Fehlermeldung wegen origin oder, wenn man das weglässt, wird das Bild angezeigt, aber die Funktion zum Auslesen der Farben streikt wegen tainted.


    Gibt es sonst eine Möglichkeit mit normalem Canvas, die mousemove-Funktion aus deinem Script einzubinden oder ist das speziell jCanvas?

  • Mit PHP geht es:


    Code
    $url='http://webentwicklung.ulrichbangert.de/images/bild1.jpg'; // als normlale Bilddatei
    
    $url='http://webentwicklung.ulrichbangert.de/getimage.php'; // durch PHP-Script eingelesen
    
    $newurl='mypic.png'; // lokal zu speichern
    file_put_contents($newurl, file_get_contents($url));


    Die source-Zeile im Script dann etwas anpassen:


    Code
    source: '".$newurl."',


    Ich habe beide Bild-URL-Varianten ausprobiert mit dem jCanvas-Script von Sempervivum und funktionieren beide.

  • Das stimmt, mit PHP und file_get_contents() kann man die Cross-Origin-Beschränkungen umgehen. In dem Script in meinem Posting #18 kann man ja als Parameter für file_get_contents auch eine URL auf einer anderen Domain übergeben.

  • ich finde aber auch komisch.

    wenn ich das in ein userscript packe

    Code
    GM_xmlhttpRequest({
            'method': 'GET',
            'url': 'http://checkip.dyndns.org/',
                 onload: function(responseDetails) {
                       var content = responseDetails.responseText;
    alert(content)
    }});

    und egal von welcher seite aus ausführe bekomme ich antwort vom alert,mit seiten inhalt.


    mache ich den code in einer fiddel rein kommen nur fehler meldungen.

    auch irgendwie koomisch.


    Kann man dein canvas code auch so umschreiben das er die vorhandenen bilder einer homepage(zb hier jetzt) die farb pixel auslesen kann oder muss man jedes bild da einzelnd mit hand reinschreiben?

  • Kann man dein canvas code auch so umschreiben das er die vorhandenen bilder einer homepage(zb hier jetzt) die farb pixel auslesen kann oder muss man jedes bild da einzelnd mit hand reinschreiben?

    das konnte ich halbwegs klären und zwar so

    aber irgendwie nimmt der nicht jedes bild bzw jedes 2te. also ganz richtig ist das noch nicht aber wo ist der fehler? oder wie kann man den code ändern das es besser läuft?

    hat einer nee idee?

  • Sehr trickreich, Basti, Respekt! Verbesserungsvorschlag: Die Elemente nur einmal ermitteln:

    Code
    var alle=document.getElementsByTagName('img');
    for(var g=0;g<=alle.length;g++){
       var dasbild = alle[g]; 
       try{
           var k=dasbild.src;
           var w=dasbild.width;
           var h=dasbild.height;
           var z=dasbild.outerHTML='<canvas width="'+w+'" height="'+h+'"></canvas>';
  • Zitat
    1. GM_xmlhttpRequest({
    2. 'method': 'GET',
    3. 'url': 'http://checkip.dyndns.org/',
    4. onload: function(responseDetails) {
    5. var content = responseDetails.responseText;
    6. alert(content)
    7. }});

    und egal von welcher seite aus ausführe bekomme ich antwort vom alert,mit seiten inhalt.


    mache ich den code in einer fiddel rein kommen nur fehler meldungen.

    Wahrscheinlich liegt das daran, dass GM_xmlhttpRequest() nicht zu Javascript gehört, sonder von Greasemonkey definiert wurde.

    Mache dich mit jQuery $.ajax vertraut, damit sollte es funktionieren.

  • komisch .. also mit var cv=$(z) klappt irgendwie nicht .


    hatte eben gar nicht drauf geachtet. das komische ist ja das nur jedes 2 te bild geht . und noch komiischer weise ist das jedes 2 te bild jetzt ein zeichen hat ,sehe foto.


    was ist da passiert? wo kommt das zeichen weg ? warum geht nur jedes 2te foto? finde das verhalten etwas merkwürdig




    html-seminar.de/woltlab/attachment/1259/

    hier noch mal das ganze userscript wie es etzt ist

  • Zitat

    warum geht nur jedes 2te foto?

    Das war jetzt ein bisschen verzwickt. Die Sache ist die: Bei der Variablen "alle" handelt es sich um eine "live node list":

    https://wiki.selfhtml.org/wiki…ment/getElementsByTagName

    Das bedeutet, dass diese Liste aktualisiert wird, wenn sich im DOM etwas ändert. Wenn Du jetzt durch outerHTML aus dem img-Element ein canvas machst, verschwindet es aus der live node list, eben weil es jetzt kein img mehr ist. Dann rückt das nächste an die erste Position. Weil Du aber die Variable g bei jedem Schleifendurchlauf erhöhst, wird jeweils ein Bild übersprungen und Du erreichst das übernächste.

    Dieses funktioniert bei mir:

    Wahrscheinlich wäre das Problem nicht entstanden, wenn man es durchgehend mit jQuery gemacht hätte.

  • das ist ja kompliziert. da denkt man was kann den an den code noch falsch sein? und dann findest du da ein fehler den ich wohl nie gefunden hätte,weil die konsole hatte da auch nix brauchbares gesagt.

    jetzt frage ich mich nur noch eins.

    Code
    var dasbild = alle[0];

    die "0" müsste doch normalerweise ein i sein wegen der schleife,oder nicht?

    habe mal mit alert geprüft,aber es scheint ja alles richtig zu sein mit der "0". nur wie tut sich den jetzt das bild erhöhen? der müsste doch jetzt immer das erste bild drinne haben oder nicht?


    habe gesehen das du den canvas ellement jetzt mit einer id versehen hast ,aber dadurch kann sich doch nicht das bild ein erhöht haben oder doch?

  • Zitat

    die "0" müsste doch normalerweise ein i sein wegen der schleife,oder nicht?

    Eigentlich ja, ABER: Beim ersten Schleifendurchlauf machen wir durch outerHTML aus dem img-Element ein canvas. Daher verschwindet es aus der life list weil es jetzt kein img mehr ist und das zweite rückt an die erste Stelle. Das heißt, an erster Stelle ist immer ein anderes. Mach mal ein console.log auf alle.length, dann siehst Du, dass die Liste immer kürzer wird.

  • das so nee kleinigkeit so kompliziert werden kann. mir ist aufgefallen . wenn das bild zb 100 x 100 pixel gross ist dann zeigt die maus0 von oben links nur bis 30 x 30 an der rest vonn bild ist 0,0,0,. nur die mauskordinaten stimmen.


    liegt das auch an den was du sagtest . kommt mir sovor als wenn er das erste bild oben links in der ecke auf der HP als grund wert nimmt .also ich meine von der grösse und farbwerte die angezeigt werden könnte das hinkommen..


    das mit den verscbieben das verstehe ich auch noch nicht ganz? geht das nicht eifacherer? was heist einfacherer, das sind ja nur paar buchstaben ,viel code ist das ja garnnicht

  • Zitat

    wenn das bild zb 100 x 100 pixel gross ist dann zeigt die maus0 von oben links nur bis 30 x 30 an der rest vonn bild ist 0,0,0,. nur die mauskordinaten stimmen

    Das habe ich auch beobachtet und konnte den Fehler leider nicht finden. Ich habe aber den Rest auf jQuery umgestellt und damit scheint es zu funktionieren:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!