pixel farbe auslesen

by basti1012

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.3/jcanvas.js"></script>
<br><br><br><div id="bild2"></div><img id="bild1" src="https://avatars1.githubusercontent.com/u/1700366?s=88&v=4" width=100 height=100><span id="ll"></span>

CSS

div{
  position:absolute;
 
  top:100px;
  left:0px;
  width:222px;
  height:222px;
}

JavaScript

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