basti1012.bplaced.net

Ich wollte das hier versuchen. <a href="https://www.lima-city.de/thread/farbe-ermitteln">https://www.lima-city.de/thread/farbe-ermitteln</a> mit Javascript alleine geht das wohl noch nicht und da wäre PHP wohl ne Lösung. Das heißt, um sowas nachzubauen, müsste das PHP Script auf dem 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 Wie kann man die Farbe unter der Maus auslesen, wenn das Bild über ein Fremdlink eingebunden ist.

Code

                                    
                                  <script src="/js_webseite/jquery.js"></script>
<script src="/js_webseite/jcanvas.js"></script>
<style>
div{
  width:222px;
  height:222px;
}
</style>
<h1>
Version von Basti
</h1>
<div id="bild2"></div><img id="bild1" src="/image/1700366.png" width=100 height=100><span id="ll"></span>
<script>
function toDataUrl(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
            callback(reader.result);
        }
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
}
d=document.getElementById('bild1').src;
toDataUrl(d, function(myBase64) {
    //console.log(myBase64); 
 p=document.getElementById('bild2').innerHTML='<img id="bild3" src="'+myBase64+'" width="222" height="222">'
 
weiter()
});







function weiter(){
 
v=$("#bild3").html()
 
$("#bild3").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('X='+layer.eventX+' ,Y= '+layer.eventY+' ,rgb('+px.r+','+px.g+','+px.b+')');
                
  document.getElementById('ll').innerHTML='X='+layer.eventX+' ,Y= '+layer.eventY+' ,rgb('+px.r+','+px.g+','+px.b+')';              
                 
                    }
                });
            }
        });
    });
    document.getElementById('bild1').style.display='none'; 
        }                
 
</script>



<h1>
Überarbeitete Version vom sempervivum
</h1>

    <canvas width="800" height="200"></canvas>
    <span id="ll1"></span>
    <script>
            cv = $("canvas");
        cv.drawImage({
            source: "/image/1700366.png",
            layer: true,
            crossOrigin: 'anonymous',
            x: 0, y: 0, fromCenter: false,
            mousemove: function (layer) {
                cv.setPixels({
                    x: layer.eventX, y: layer.eventY,
                    width: 1, height: 1,
                    each: function (px) {
            document.getElementById('ll1').innerHTML=px.r+','+px.g+','+px.b;
                    }
                });
            }
        });


    </script>