create a 2d array of image pixels using canvas html5

Question

hello Guys i was trying to copy an image pixel to a matrix so i can use it later. i was wondering if i was using the matrix in js correctly since i am a begginer thanks

<canvas id="Canvas" >  
     Navigator doesnt support canvas 
  </canvas>
      <script type="text/javascript">


  var img = new Image();

  img.src = "jj.JPG"; // Set source path

 img.onload = function() {
var matrix = [];
context.putImageData(idata, 0, 0);

for(var y = 0; y < canvas.height; y++) {

 matrix[y] = [];
for(var x = 0; x < canvas.width; x++){


var imgd = context.getImageData(x, y, canvas.width, canvas.height);
var pix = imgd.data;

var pos = (y * canvas.width + x) * 4; 
    matrix[y][pos]= pix[pos];;     //red      
    matrix[y][pos+1] =pix[pos+1];;    //bleu      
    matrix[y][pos+2]= pix[pos+2];;   //green       
    matrix[y][pos+3]= 255;          //alpha
}
  }
 </script>

 </body>
 </html>

It seems to me that the var pos = (y * canvas.width + x) * 4 comes from another piece of code which uses a one-dimensional array to represent the image data. Your matrix however is two-dimensional. You can flatten matrix simply by removing all the [y] parts. — le_m
– le_m, Commented Mar 19, 2017 at 1:05
le_m i have removed all the [y] so is it correct like this? thanks for helping me — Hanane Evancho
– Hanane Evancho, Commented Mar 19, 2017 at 1:17

Hanane Evancho · Accepted Answer · 2017-03-19 01:18:45Z

1

for(var y = 0; y < canvas.height; y++) {//ligne
 matrix[y] = [];
for(var x = 0; x < canvas.width; x++){
//colonne

var imgd = context.getImageData(x, y, canvas.width, canvas.height);
var pix = imgd.data;


    var pos = (y * canvas.width + x) * 4; // position de pixel
    matrix[pos]= pix[pos];;           // some R value [0, 255]
    matrix[pos+1] =pix[pos+1];;           // some G value
    matrix[pos+2]= pix[pos+2];;           // some B value
    matrix[pos+3]= 255;           // set alpha channel
    }
 }
   return matrix;

}

answered Mar 19, 2017 at 1:18

Hanane Evancho

335 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

le_m Over a year ago

matrix[y] = [] doesn't seem right, you might want to remove it. Do you encounter any error when you run the code? Use console.log() or similar to get an idea of what the code does and if it does what you expect.

Hanane Evancho · Accepted Answer · 2017-03-19 01:24:07Z

0

for(var y = 0; y < canvas.height; y++) {//ligne

for(var x = 0; x < canvas.width; x++){
//colonne

var imgd = context.getImageData(x, y, canvas.width, canvas.height);

   var pix = imgd.data;


    var pos = (y * canvas.width + x) * 4; // position de pixel
    matrix[pos]= pix[pos];;           // some R value [0, 255]
    matrix[pos+1] =pix[pos+1];;           // some G value
    matrix[pos+2]= pix[pos+2];;           // some B value
    matrix[pos+3]= 255;           // set alpha channel
    }
  }
   return matrix;

 }

answered Mar 19, 2017 at 1:24

Hanane Evancho

335 bronze badges

Collectives™ on Stack Overflow

create a 2d array of image pixels using canvas html5

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related