jindriska: Bilddaten auslesen mit JavaScript - Formate?

Hallo,

ich möchte mit JavaScript die Farbwerte bestimmter Bildbereiche auslesen. Das geht auch mit den meisten Bildern- nicht aber bei dem angehängten. Wie kann ich herausfinden, weshalb hier alle Werte von alle möglichen Stellen immer ergeben?

<!DOCTYPE html>
<html>
<body>

<img id="scream" src="willow.png" alt="The Scream" width="220" height="277">
<canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
document.getElementById("scream").onload = function() {
	var c = document.getElementById("myCanvas");
	var ctx = c.getContext("2d");
	var img = document.getElementById("scream");
	ctx.drawImage(img, 0, 0);
	var imgData = ctx.getImageData(0, 0, c.width, c.height);
	
	var wert=imgData.data[12];
	window.alert(wert);
	var wert=imgData.data[13];
	window.alert(wert);
	var wert=imgData.data[14];
	window.alert(wert);
	var wert=imgData.data[15];
	window.alert(wert);
};
</script>

<p><strong>Note:</strong> The canvas tag is not supported in Internet 
Explorer 8 and earlier versions.</p>

</body>
</html>

  1. Hallo,

    ... weshalb hier alle Werte von alle möglichen Stellen immer ergeben?

    Immer was ergeben?

    Kommt in der Javascriptconsole eine Meldung?

    Gruß
    Jürgen

    1. Hallo nochmal,

      wird das Bild denn angezeigt?

      In meiner Spielwiese kann das Bild ausgelesen werden.

      Gruß
      Jürgen

      1. Ja, das Bild wird angezeigt ich kann es auch verändern. Wenn ich aber mit alert die Werte ausgebe (siehe Skript) kommt immer 0 (Null)- egal wo.

        var wert=imgData.data[15];
        	window.alert(wert);
        

        Bei anderen Bildern bekomme ich die entsprechenden RGB-Werte. In der Konsole (Chrome-Dev) steht: [Violation] 'load' handler took 3982ms

        1. Hallo,

          wie groß ist das Bild denn?

          Kann man sich deine Seite irgendwo ansehen?

          Gruß
          Jürgen

          1. ja, hier ist ein Beispiel http://www.mikolaskova.cz/testscreen/test/

            1. Hallo,

              so richtig weiß ich auch nicht, was da schief läuft. Was mir aufgefallen ist, das Bild ist in der Datei größer, als in der Anzeige, was man ja auch sieht, wenn es im Canvas angezeigt wird. Lass mal beim img-Element die Größenangaben weg, und lies dann die Werte im onload-Handler aus. Die Große des canvas-Elements kannst du dann auch setzen.

              Gruß
              Jürgen