Reading pixel data by JavaScript thought Canvas

Question

I have a problem t read the pixel's RGBA data from a image.But I am facing that all RGBA data( all 4 bytes for all pixel ) zero value. i use this code for JavaScript :

By the way I use this code for html. and tehn I run html by Chrome or Firefox but When I see the console log the all value of pixel Data is Zero.Why?

var canvas= document.getElementById('mycanvas');
var c=canvas.getContext("2d");

// c.beginPath();
// c.moveTo(0,0);
// c.lineTo(500,200);
// c.stroke();

var img = new Image();   
img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; 
img.crossOrigin = "Anonymous";

// var img= document.getElementById('image')
 img.onload=function () {
  c.drawImage(img,0,0);
 }

var myImageData = c.getImageData(0, 0, 500, 500);
//var myImageData = c.createImageData(600, 600);
var numBytes = myImageData.data.length;
var pixelData=myImageData.data;
console.log (numBytes);
console.log (pixelData);

// var x= function () {
 
// for(var i=0;i<pixelData.length;i+=40)

// {

// pixelData[i]     = 255 - pixelData[i];     // red
//       pixelData[i + 1] = 255 - pixelData[i + 1]; // green
//       pixelData[i + 2] = 255 - pixelData[i + 2]; // blue
//     }
//     c.putImageData(myImageData, 0, 0);
//   };
// //if (pixelData[i]&&pixelData[i+1]&&pixelData[i+2]===255) {

// //console.log (numBytes);

// //} 

// //else {}


// //};

// //
// x();



//pixel = imageData.data[((row * (imageData.width * 4)) + (colume * 4)) + colorindex];

//var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  // here is the most important part because if you dont replace you will get a DOM 18 exception.
//window.location.href=image;

<!DOCTYPE html>
<html>
<head>
 <title>Image processing</title>
 <style type="text/css">
 
</style>
</head>


<body>

<canvas  id="mycanvas"  width="300"  height="227">
 
</canvas>
<img src="https://mdn.mozillademos.org/files/5397/rhino.jpg" id="image" style="display:none;">
 
</style>
 
</style>="">

<script src="img.js">

</script>
 


</body>
</html>

Possible duplicate of [CanvasContext2D drawImage() issue \[onload and CORS\]](https://stackoverflow.com/questions/32880641/canvascontext2d-drawimage-issue-onload-and-cors) — Kaiido, Jun 01 '17 at 11:34
You have to wait before your image has loaded and has been drawn on the canvas before retrieving its imageData. Here you are calling getImageData out of the `onload` handler, which means that it's called just after `img.src ="..."; img.crossOrigin="...";` Have a search for "asynchronous + javascript". — Kaiido, Jun 01 '17 at 11:37

Mohanesh · Answer 1 · 2017-06-05T04:31:20.177

0

This won't work as the image comes from another domain. The canvas accepts only images from the same origin. You cannot and should not be using getImageData() from external sources that don't support CORS.

But you can convert the image into dataURL and then paint the canvas.

Edit: Sorry for not expressing it properly. The only way would be to locally download the image to your server/domain and then draw it on the canvas.

edited Jun 05 '17 at 04:31

answered Jun 01 '17 at 10:23

Mohanesh

24
3

"*But you can convert the image into dataURL and then paint the canvas.*" And how are you gonna convert the image to a dataURL if the image doesn't satisfies cross-origin limitations ? And, if the canvas were tainted, there wouldn't be any values, just an Security Error. – Kaiido Jun 01 '17 at 11:33
Hi Mohanesh Thanks for your answer.I revised following steps but still pixel values are Zero. 1- I changed the image source to the folder exactly execute on my PC. 2-I used to localhost server to run the html. 3- I use the img.crossOrigin = "Anonymous" on my code. What is wrong ? – Taher Jun 02 '17 at 14:17
@Kaiido: I have made my edits. Sorry for not expressing it properly. Taher: Setting crossOrgin header is of no use if the requested domain doesn't accept Cross-origin requests. The response should have the **Access-Control-Allow-Origin** set to " * " to accept requests from any domain. – Mohanesh Jun 05 '17 at 04:31

score 0 · Answer 2 · answered Jun 11 '17 at 10:47

I solved my problme.

firstly as Mohanesh Said we need use Localhost or http domain.So I installed the Python and used this command to creat localhost erver.

Python -m http.server

Second I used the creatpattern command instead drawimage.this code works for me:

var canvas = document.getElementById('mycanvas')
var c = canvas.getContext('2d');
// canvas.height = window.innerHeight;
// canvas.width = window.innerWidth;
var img = document.getElementById("image")
img.crossOrigin = "Anonymous";

var ptrn = c.createPattern(img, 'no-repeat');
c.fillStyle = ptrn;
c.fillRect(0, 0, canvas.width, canvas.height);

var myImageData = c.getImageData(0, 0, canvas.width, canvas.height);
var numBytes = myImageData.data.length;
var pixelData = myImageData.data;
console.log(numBytes);
console.log(pixelData);

<!DOCTYPE html>
<html>

<head>
    <title>Image processing</title>
    <style type="text/css">

    </style>
</head>

<body>
    
    <canvas id="mycanvas" width="100" height="100">
    </canvas>
    <img src="test1.png" alt="" id="image" style="display: none;" />
    <script src="img22.js">
    </script>
</body>

</html>

Reading pixel data by JavaScript thought Canvas

2 Answers2