JS generate RGB of each pixel in an image

StackOverflow https://stackoverflow.com/questions/21176827

Domanda

I've borrowed this code to try and suit my needs http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/ since it does the minimum task of it renders a image pixel by pixel (i believe).

What I'm trying to do is create an array of each pixel's RGB information, and display the information in plain text.

To test I am trying this with small images, 5x5 pixels, also I have this in an .html file i've opened with chrome.

The lightly adapted JS

<script>
function drawImage(imageObj) {

    var codepanel = document.getElementById('code');
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var imageX = 69;
    var imageY = 50;
    var imageWidth = imageObj.width;
    var imageHeight = imageObj.height;
    var pixels = new Array(); //my addition
    var pixel = 0; //my addition

    context.drawImage(imageObj, imageX, imageY);

    var imageData = context.getImageData(imageX, imageY, imageWidth, imageHeight);
    var data = imageData.data;

    // iterate over all pixels
    for(var i = 0, n = data.length; i < n; i += 4) {
      var red = data[i];
      var green = data[i + 1];
      var blue = data[i + 2];
      var alpha = data[i + 3];
       pixels[pixel] = red + " " + green + " " + blue + " "; //my addition
       pixel++; //my addition
    }
    codepanel.innerHTML =  pixels.join(); //my addition

    var x = 20;
    var y = 20;
    var red = data[((imageWidth * y) + x) * 4];
    var green = data[((imageWidth * y) + x) * 4 + 1];
    var blue = data[((imageWidth * y) + x) * 4 + 2];
    var alpha = data[((imageWidth * y) + x) * 4 + 3];

    for(var y = 0; y < imageHeight; y++) {
      for(var x = 0; x < imageWidth; x++) {
        var red = data[((imageWidth * y) + x) * 4];
        var green = data[((imageWidth * y) + x) * 4 + 1];
        var blue = data[((imageWidth * y) + x) * 4 + 2];
        var alpha = data[((imageWidth * y) + x) * 4 + 3];         
      }
    }
  }

  var imageObj = new Image();
  imageObj.onload = function() {
    drawImage(this);
  };
  imageObj.src = 'pallet.gif';
</script>

HTML

<!DOCTYPE HTML>
<html>
<head> </head>
<body>
    <canvas id="myCanvas" width="100%" height="100%"></canvas>
    <div id="code"> </div>
</body>
</html>
È stato utile?

Soluzione

It means the image you drew to canvas came from a different origin than your page (file:// is considered a different origin too if you are testing with local pages).

The easiest way to solve this is:

  • If local, install a light-weight server to load the pages off (localhost) such as Mongoose.
  • If online, move the images to your own server or try to request cross-origin use. For this latter the external server need to be configured to allow this.

To request cross-origin do the following before setting src:

imageObj.crossOrigin = '';
imageObj.src = 'pallet.gif';

It the external server do not accept this will fail.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top