Canvas scaneando imagen

by Alejandro M

HTML

<img src="/img/logo.png">
<pre id="output"></pre>
<pre id="output2"></pre>

CSS

body {
  background: lightblue;
  padding: 20px;
}

pre {
  color: black
}

img {
  position: relative;
}

JavaScript

$(function() {
  $('img').mousemove(function(e) {
    if (!this.canvas) {
      this.canvas = $('<canvas />')[0];
      this.canvas.width = this.width;
      this.canvas.height = this.height;
      this.canvas.getContext('2d').drawImage(this, 0, 0, this.width, this.height);
    }

    var pixelData = this.canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;
    $('#output').html('R: ' + pixelData[0] + '<br>G: ' + pixelData[1] + '<br>B: ' + pixelData[2] + '<br>A: ' + pixelData[3]);
  });
    
});//end mousemove

$('img').click(function(e){
      this.canvas = $('<canvas />')[0];
      this.canvas.width = this.width;
      this.canvas.height = this.height;
      this.canvas.getContext('2d').drawImage(this, 0, 0, this.width, this.height);
    var pixelData = this.canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, this.width, this.height).data;
    var test = "";
for (var i = 0, n = pixelData.length; i < n; i += 4) {
  test += pixelData[i+3] + ";";
}
    $('#output2').html(test);
  });