Beiträge von Sempervivum

Wenn es um Ajax geht, empfehle ich auf jeden Fall, lieber jQuery zu verwenden. Ist viel einfacher und übersichtlicher.

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:

    $("img").each(function(idx, ele) {
        var im = $(this);
        var src = im.attr("src");
        var w = im.width();
        var h = im.height();
        var cv = $('<canvas width="'+w+'" height="'+h+'"></canvas>');
        im.replaceWith(cv);
        //im.replaceWith('<canvas id="cv' + idx + '" width="'+w+'" height="'+h+'"></canvas>');
        //var cv = $("#cv" + idx);
        cv.drawImage({
            source: src,
            layer: true,
            x: 0, y: 0, width: w, height: h, fromCenter: false,
            mousemove: function (layer) {
                cv.setPixels({
                    x: layer.eventX, y: layer.eventY,
                    width: 1, height: 1,
                    each: function (px) {
                        console.log(layer.eventX, layer.eventY, px.r, px.g, px.b);
                    }
                });
            }
        });
    });

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.

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/JavaScrip…ementsByTagName

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:

var alle=document.getElementsByTagName('img');
 for (var i = 0; alle.length > 0; i++){
    var dasbild = alle[0];
    var k=dasbild.src;
    var w=dasbild.width;
    var h=dasbild.height;
    var z=dasbild.outerHTML='<canvas id="cv' + i + '" width="'+w+'" height="'+h+'"></canvas>';
    var cv = $("#cv" + i);
        cv.drawImage({
            source:k,
            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(layer.eventX, layer.eventY, px.r, px.g, px.b);
                    }
                });
            }
        });
 }

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

Vielleicht sollte man jsfiddle nicht überstrapazieren, denn man sieht ja, dass es häufig Probleme macht, z. B. wenn es für ein Skript kein CDN gibt. Außerdem ist das Editieren in diesen kleinen Fenstern nicht besonders komfortabel. Meine Empfehlung: Kostenlosen Webspace bei bplaced.net besorgen und dort entwickeln.

Zitat

aber wo ist der fehler?

Ich habe es noch nicht getestet, aber ändere dies:

cv = $("canvas");

in das:

var cv = $(z);

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.

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

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>';

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.

Da fehlt jeweils das abschließende Semikolon:

    $headers[] = 'From: sternberg.konrad@web.de'
    $headers[] = 'Reply-To: sternberg.konrad@web.de'

Sehr hilfreich in Bezug auf solche Fehler ist ein Editor, der sie gleich beim Editieren anzeigt.

Anscheinend hast Du da zwei Dinge vermengt, die nicht zusammen passen:

Zuerst erzeugst Du ein Array $headers, offenbar nach dem Muster des Links auf php-kurs.

Dann überschreibst Du dieses jedoch in Zeile 10 mit einem String, so dass der Inhalt verloren geht.

Dann wendest Du die Funktion implode() auf einen String und $headers an, die jedoch String und ein Array als Parameter erwartet, während die $headers jetzt einen String enthält.

Genau so hatte ich es auch verstanden und genau damit beschäftigt sich mein erster Link. Validierung war nur so eine Randbemerkung.

Das Cross-Origin-Problem ist unabhängig davon, ob du eine Bibliothek verwendest oder nicht. Verwende doch einfach ein eigenes Bild, dann stellt sich das Problem nicht.

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.

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.

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.

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

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.

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.

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.